Web App Markup Language (WAML)

Converts user-generated markup text to HTML.

Introduction

The WAML library makes it easy to programmatically implement rich HTML document formatting from within your Javascript code using a set of defined keywords. With built-in logic to replace special characters such as the quotation mark ("), less than (<), and greater than (>) symbols with their respective HTML entities, you can also use this library in your own user input fields to enable rich text formatting.

Specs

Property	Value
Written in	JavaScript
Compatible with	Chrome Edge Firefox Safari

Symbols

Markup grammar	HTML rendition grammar	Markup sample	HTML rendition sample	Result
h1{TEXT}
h2{TEXT}
h3{TEXT}
h4{TEXT}
h5{TEXT}
h6{TEXT}
p{TEXT}
*{TEXT}
/{TEXT}
_{TEXT}
-{TEXT}
img{IMG_URL}
img{IMG_URL,ALT_TEXT}
fig{IMG_URL}
fig{IMG_URL,ALT_TEXT}
embed{URL}
youtube{VIDEO_ID}
link{URL}
link{URL,TEXT}
box{TEXT}
color{COLOR,TEXT}
highlight{COLOR,TEXT}

Import code

Add this script tag into your webpage's <head> tag to use this library.


                    <script src="https://sidera.dev/lib/waml.js"></script>

Example

HTML


                    <div id="plainText"></div>
                    

                    <div id="richText"></div>

Javascript


                    // Set input markup here
                    

                    var markup = "The /{rain} in *{Spain} stays /{mainly} on the *{plain}.";
                    

                    

                    // Parse the input markup here
                    

                    var parsed = parseMarkup(markup);
                    

                    

                    // Get document elements
                    

                    var elementPlainText = document.getElementById("plainText");
                    

                    var elementRichText = document.getElementById("richText");
                    

                    

                    // Show the HTML source code rendering on the page
                    

                    elementPlainText.innerText = parsed;
                    

                    

                    // Show the end rendition on the page
                    

                    elementRichText.innerHTML = parsed;

jQuery


                    // Set input markup here
                    

                    var markup = "With blackest /{moss} the flower /{pots} were thickly crusted, one and *{all}.";
                    

                    

                    // Parse the input markup here
                    

                    var parsed = parseMarkup(markup);
                    

                    

                    // Show the HTML source code rendering on the page
                    

                    $("div#plainText").text(parsed);
                    

                    

                    // Show the end rendition on the page
                    

                    $("div#richText").html(parsed);

Take it for a spin!

Tinker around with it in our Try-It Editor.