A new way to write HTML, elegantly.
There are many preprocessors that make web development easier, such as LESS, SASS, Stylus, CoffeeScript etc. But there isn't much out there that makes writing HTML any easier, at least not in a elegant, generic and non-restrictive form that will work for most project requirements, regardless of framework... well, to an extent.
So, I decided to make Candor.
head
title = 'Hello World'
body
div #app `container`
div `row`
div `col-xs-12 text-center`
img src'images/sick.png'
p = 'This is pretty sick!'
Transforms into the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<div id="app" class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/sick.png" />
<p>This is pretty sick!</p>
</div>
</div>
</div>
</body>
</html>
In your project directory, run the following command.
npm install candor --save
then simply call the following where necessary
var candor = require('candor');
var html = candor.parse(...) // Parse the candor syntax here.
At the moment the parser is available under x.parse(...). There will be gulp and Laravel elixir plugins soon, which will make development with Candor much easier. For the time being though, if you'd like to play around the syntax rules are as follows:
name #id `classes` key'value' +mutator = 'Inline content'
To generate an HTML tag, the only required section above is name. To give the tag an id, add #id where id is, well, the css id. Classes can be added inside a class block denoted between two back-tick characters as shown above. Tag properties are added as key'value'. Mutators, which are really just properties without values, such as disabled are denoted as +disabled. Inline content is again purely optional, but if needed, is simply specified as = 'content' at the end of a tag. If this section is present, the opening and closing tags generated will be placed onto a single line, instead of separate lines. For a complete example, the following Candor syntax:
div #app `app app__dark` @click.stop'toggle()' +disabled = 'Uhmmm?'
will produce the rendered HTML shown below:
<div id="app" class="app app__dark" @click.stop="toggle()" disabled>Uhmmm?</div>
? This is a comment.
Comments are just there as, well, comments. They will not be present in the rendered HTML.
script type'text/javascript'
-- alert('hello world!');
If you require some non-Candor generated HTML, such as some JavaScript, PHP etc code, simply prepend the code with -- and it will be rendered as is, as raw content. The above would produce:
<script type="text/javascript">
alert('hello world!');
</script>
p
'This is a paragraph.'
HTML content, aka the content that goes inside of a tag, is simply placed within single quotes. The content is not processed in any way, and currently only supports standard ASCII characters (Unicode support hopefully coming very soon!). The above example would produce:
<p>
This is a paragraph.
</p>
FAQs
A new way to write HTML, elegantly.
The npm package candor receives a total of 2 weekly downloads. As such, candor popularity was classified as not popular.
We found that candor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.