hypertextscriptinglanguage
v1.1.3
Published
A library for scripting html.
Downloads
2
Maintainers
romellogoodmanReadme
NOTE: This package is in hibernation mode. The core of its functionality has been added to goodgraphics.js.
hypertextscriptinglanguage
A library for scripting html.
Demo: Codesandbox Demo
Table of contents
Usage
Install
npm
npm i hypertextscriptinglanguageunpkg
<script src="https://unpkg.com/hypertextscriptinglanguage"></script>Use
const page = new SCRIPT();
page.h1('hello world');
const html = page.markup();API
new SCRIPT(options)
Creates a new instance. options is a JavaScript object with the following properties:
@param {String} containerSelector or DOM element used as container for the SVG. Defaults to 'html'.@param {Number} fontsizeThe font size for the document. Defaults to 16.
$tag(content, attributes)
The library supports a majorty of html tags as the primary interface. In the example above we create a <h1> tag with it's content and add it to the document's <body>. This function is a wrapper around this.head and this.body
@param {String} contentThe content of the element.@param {Object} attributesKey value pairs of attributes to apply to the tag.
Nesting can be created when content is passed an array [].
const page = new SCRIPT();
page.ul([
//
page.li([
//
page.span('item'),
page.span('1'),
]),
page.li('item 2'),
page.li('item 3'),
]);head(tag, content, attributes)
Adds an element to the head of the document.
@param {String} tagThe tag of the element.@param {String} contentThe content of the element.@param {Object} attributesKey value pairs of attributes to apply to the tag.
body(tag, content, attributes)
Adds an element to the body of the document.
@param {String} tagThe tag of the element.@param {String} contentThe content of the element.@param {Object} attributesKey value pairs of attributes to apply to the tag.
comment(content)
Adds a comment to the head of the document.
markup()
@return {String}The html markup for the document.
draw()
Draws the markup.
remove()
Removes the markup.
redraw()
Re-draws the markup.
empty()
Empties the markup and resets the SCRIPT.
Contributing
All contributors and all contributions both big and small are welcome in this project. The examples are built on top of Eleventy and can be run using:
npm run dev
npm run examples