https://github.com/tmpmachine/divless-html
One way converter for divless HTML format. Divless HTML is a custom HTML format that uses square brackets and has a nameless div tag.
https://github.com/tmpmachine/divless-html
javascript
Last synced: 12 months ago
JSON representation
One way converter for divless HTML format. Divless HTML is a custom HTML format that uses square brackets and has a nameless div tag.
- Host: GitHub
- URL: https://github.com/tmpmachine/divless-html
- Owner: tmpmachine
- Created: 2021-01-17T13:50:14.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-26T06:25:16.000Z (almost 2 years ago)
- Last Synced: 2025-04-10T06:40:52.789Z (12 months ago)
- Topics: javascript
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# divless.js
One way converter for divless HTML format.
VS Code extension : https://github.com/tmpmachine/vsce-divless.
Codetmp7 editor has divless HTML enabled by default : https://github.com/tmpmachine/codetmp.
## Usage Example
To integrate this library with your application, use the following code :
```html
let html = divless.replace(`
[ {bor:1px solid}
[p "Hello world!"]
]
`);
```
Returned result :
```html
Hello world!
```
## Implementing Divless HTML Conversion in Your Application
Please read the [divless HTML conversion specification](https://github.com/tmpmachine/divless-html/wiki/Divless-HTML-Conversion-Specification).
## Skip Divless Format
Divless.js will skip replacing divless HTML format if wrapped inside one of these matching sequence :
| Start skip | End skip |
| --- | --- |
| |
| <script | </script> |
| <!--nodivless--> | <!--/nodivless--> |
Example :
```html
[btn "Button 1"]
<!--nodivless-->
[ #my-div
Do not replace this part
]
<!--/nodivless-->
[btn "Button 2"]
```
Returned result :
```html
<button>Button 1</button>
<!--nodivless-->
[ #my-div
Do not replace this part
]
<!--/nodivless-->
<button>Button 2</button>
```
## Reserved Attribute Prefix
### ID
Use `#` to set element ID.
```html
[ #my-div
Hello World.
]
```
Returned result :
```html
<div id="my-div">
Hellow World.
</div>
```
### Class
Use `.` to set element class.
```html
[ .class1 .class2
Hello World.
]
```
Returned result :
```html
<div class="class1 class2">
Hellow World.
</div>
```
### Inline Style
Use `{}` to wrap inline style. CSS properties shortname available below.
```html
[ {p:8px 16px} {bor:1px solid} {pos:absolute;top:0}
Hello World.
]
```
Returned result :
```html
<div style="padding:8px 16px;border:1px solid;position:absolute;top:0">
Hellow World.
</div>
```
## Limitation
Currently not supporting one line nested tags, for example this one will fail replaced correctly :
```
[ [btn 'This is a button inside a div container']]
```
Solution: use divless on the inner most element :
```
<div>[btn 'This is a button inside a div container']</div>
```
## HTML Shortname
| HTML Tag | Shortname |
| --- | --- |
| div | |
| video | v |
| audio | au |
| button | btn |
| canvas | can |
| input | in |
| span | s |
| label | l |
| textarea | t |
| select | sel |
| option | opt |
## CSS Shortname
Note : available only for inline style properties.
| CSS Property | Shortname |
| --- | --- |
| padding | p |
| padding-left | pl |
| padding-top | pt |
| padding-right | pr |
| padding-bottom | pb |
| margin | m |
| margin-left | ml |
| margin-top | mt |
| margin-right | mr |
| margin-bottom | mb |
| text-decoration | td |
| text-transform | tt |
| font-family | ff |
| font-size | fs |
| font-style | ft |
| font-weight | fw |
| text-align | ta |
| white-space | ws |
| float | f |
| overflow | ov |
| min-width | mw |
| min-height | mh |
| max-width | Mw |
| max-height | Mh |
| width | w |
| height | h |
| display | d |
| visibility | vis |
| opacity | op |
| color | col |
| background | bg |
| border-radius | rad |
| border | bor |
| position | pos |
| z-index | z |
| top | t |
| left | l |
| right | r |
| bottom | b |
| line-height | lh |
### Flexbox / Grid
| CSS Property | Shortname |
|---|---|
| grid-template-rows | rows |
| grid-template-columns | cols |
| grid-gap | Gap |
| grid-column-start | col-start |
| grid-column-end | col-end |
| grid-row-start | row-start |
| grid-row-end | row-end |
| align-items | ali |
| align-self | als |
| justify-content | jt |