@m4blung/jsmark
v0.0.17
Published
JsMark is a JavaScript library, that enables writing static html websites completely in JavaScript/TypeScript.
Downloads
8
Readme
JsMark
JsMark is a JavaScript library, that enables writing static html websites completely in JavaScript/TypeScript.
Basic usage
Creating a basic document
import {$} from '@m4blung/jsmark';
$(
$('html')(
$('head')(
$('title')('Document')
),
$('body')(
$('main')(
$('h1')('This is a header!'),
$('p')('This is a paragraph.')
)
)
)
)('/build/test.html')To create a basic document first import $ from jsmark. $ is the default export of the package.
To create an element run $ supplying an tag name as the argument. As an example: $('div') would create the html <div> tag.
To add children such as text and other html elements to a tag simply call the element as a function supplying the children as arguments.
$('div')(
'Text!',
$('p')('More text!')
)Would compile into:
<div>
Text!
<p>
More text!
</p>
</div>To export the document simply call $ supplying the document <html> element as the argument. This will return a function that takes a path as an input, compiles the JsMark elements into html and saves the results to the given path.
import {$} from '@m4blung/jsmark';
$(
$('html')(
$('head')(
$('title')('Document')
),
$('body')(
$('main')(
$('h1')('This is a header!'),
$('p')('This is a paragraph.')
)
)
)
)('build/test.html')Would create the following html document:
<html>
<head>
<title>Document</title>
</head>
<body>
<main>
<h1>This is a header!</h1>
<p>This is a paragraph.</p>
</main>
</body>
</html>and save it to './build/test.html'.