Pretty-markup NPM

Pretty Markup is a HTML preprocessor that make it more semantic to write html. The concept remains the same, but without the "< > </>", like Sass, but different. You can see this as a super set of HTML, like TypeScript.

You can keep posted by following @_mopires on twitter and @mopires on github.
npm i -g pretty-markup

Usage

<!DOCTYPE html>
<html>
<head>
    <title>
        Pretty Markup File!
    </title>
</head>
<body style="font-family: system-ui;font-size: 1.2rem; color: #222;">
    <img src="pretty-logo.svg">
    <h1>
        Hello World!</h1>
    <small>
        This page was create with a <a href="https://www.npmjs.com/package/pretty-markup">
            Pretty Markup</a>
    </small>
    <h2>
        Usage</h2>
    <p>
        Pretty Markup carry the same aspects of the traditional HTML document,
        except the use of characters, that sometimes, can make the document
        ugly to declare markups.</p>
    <div class="code-example">
        <p>Hello world!</p>
    </div>
    <p>
        With Pretty Markup, It's more clear to understand what's going on. &#128516</p>
    <div class="code-example">
        p 'Hello world!' /p
    </div>
</body>
</html>

Pretty Markup

html
    head
        title "Pretty Markup File!" /title
    /head
    body style="font-family: system-ui;font-size: 1.2rem; color: #222;"
        img src="pretty-logo.svg"
        h1 "Hello World!" /h1
        small "This page was create with a " a href="https://www.npmjs.com/package/pretty-markup" 
        "Pretty Markup" /a
        /small

        h2 "Usage" /h2
        p 
            "Pretty Markup carry the same aspects of the traditional HTML document, 
            except the use of characters, that sometimes, can make the document
            ugly to declare markups." 
        /p

        div class="code-example"
           "<p>Hello world!</p>"
        /div

        p 
            "With Pretty Markup, It's more clear to understand what's going on. &#128516"
        /p
        
        div class="code-example"
            "p 'Hello world!' 
        /p"
        /div
    /body
/html

Get started

To start developing with Pretty Markup, create a folder called src at the root of your project. After that, just start creating your files with the extension .pm.