AHTML Preprocessor

What's AHTML?

AHTML (Advanced HyperText Markup Language) is an advanced version of html that makes your life waaay easier!

Install

1. yarn global add ahtml or npm install -g ahtml
2. Create an html file
3. Write advanced html code in it, try copying and pasting the examples too
4. ahtml path/to/file.html
5. Now your code is compiled! working watch function soon:tm:

AHTML CLI

 ahtml path/to/file [path/to/destination, --no-minify]

path/to/file

guess what :^)

Path/to/destination

Can you even read?

--no-minify

The compiled html code won't be minified

--watch / --w

This compiles the code everytime the selected file changes.

Docs

Markdown (md)

<!--From this-->
<md>
  **Hello, I am bold!**
</md>

<!--To this-->
<p><strong>Hello, I am bold!</strong></p>

<!--Or from this-->
<md src='markdown.md'>
  # Hello, I will be ignored!
</md>

<!--To this-->
<h1 id="hello-i-am-some-markdown">Hello I am some markdown!</h1>
<p><strong>AND i AM BOLD</strong></p>

<!--The content inbetween <md> gets ignored because a source is already present-->

is an element that compiles markdown to html, it's useful for making the code more readable.

Attributes

• src , file path to the imported markdown file, if you put an src attribute, any content inside it will be ignored.

Sass

<!--From this-->
<sass>
  $header-size: 100px;
  
  h1 {
      font-size: $header-size;
  }
</sass>

<!--To this-->
<style>h1 {
  font-size: 100px;
}</style>

<!--Or from this-->
<sass src='index.scss'></sass>

<!--To this-->
<style>
  h1 {
    font-size: 100px;
  }
</style>

it's an element that compiles sass and scss to normal css.

Attributes

• src , file path to the imported sass file, if you put an src attribute, any content inside it will be ignored.