ahtml

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™️

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.