Soon enough this package will be deprecated and a new one will be available with a small change in it's name. Don't worry, there will be a warning with more details when it happens. You can keep posted by following @mopires in github.
Modern and semantic way to write html. The concept remains the same, but without the "< > </>", like Sass, but different.
HTML
<!DOCTYPE html>
<html lang="br">
<head>
<meta description="This is a page made with htmlpp!">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
</head>
<body class="bg-dark">
<main class="container pt-3">
<div class="row">
<div class="col text-white">
<h1>HTMLPP</h1>
</div>
</div>
<div class="row text-white">
<p>
Modern way to write html. The concept remains the same, but without the "< > </>". It's like Sass, but
different.
</p>
<div class="col">
<p id='about'>
HTMLpp is a HTML preprocessor.
</p>
</div>
</div>
</main>
</body>
</html>HTMLPP
html lang="en"
head
meta description="This is a page made with htmlpp!"
style href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
closehead
body class="bg-dark"
main class="container pt-3"
div class="row"
div class="col text-white"
h1 $hero closeh1
closediv
closediv
div class="row text-white"
p
$description
closep
div class="col"
p id='about'
$about
closep
closediv
closediv
closemain
closebody
closehtml
You don't need to use special characters to code, only if you want to.
Use // to comment in htmlpp code;
close
icon
style
javascript
$
The close + tag is for closing a tag (Ex. closeh1);
The style and javascript require only a src.
The $ is for declaring variables (for text).
To write free text use quotes.
All atributes are suported.
The meta tags, charset and viewport are built in with default values of utf-8 and width=device-width, initial-scale=1 respectively. DOCTYPE also, you don't need to write them at htmlpp document.
Warning: At the moment, to change it, you need to go in the build file and change it. In the future, that will have a much more cooler way to do it.
Those are the new supported attributes to meta!
[...]
meta description='This is a page made with html++!'
meta keywords='htmlpp, js, nodejs'
[...]
To setup the icon of the page you can use icon tag.
icon href='myicon.png'
To use variables, you need to create a file called var.json in the root of your project and introduce all your variables in there.
{
"hello_world": "Hello world!",
"my_name_is": "Giovani Giorgio",
"but_everybody_calls_me": "Giorgio",
"age": 27
}To call a variable in a htmlpp file it's simple.
$hello_world
$my_name_is
Variables require a $ to be interpreted as a variable.
Linking files to htmlpp is simple:
style src='assets/css/main.css'
javascript src='assets/js/main.js'
Even to link an external file:
style href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
On Visual Code Editor you can search for HTMLPP and install the extension and enjoy it!
ext install mopires-htmlpp.htmlpp
You can install it with NPM and test.
npm i htmlpp-com-github-mopires.
Installing globally allow you to use the command htmlpp
npm i -g htmlpp-com-github-mopires
The file you are writing HTMLPP need to have the extension .htmlpp. And that's it.
Soon enough this package will be deprecated and a new one will be available with a small change in it's name. Don't worry, there will be a warning with more details when it happens. You can keep posted by following @mopires in github.
Want to give extra help?
Enjoy it!
