Published: 2025-04-14T03:40:00.000Z
Extra Syntax
Rino.js extends HTML with Markdown rendering, build-time template scripts, and inline asset exports.
Markdown
Store reusable Markdown in mds/, then import it with rino-import:
<script rino-type="md" rino-import="intro" rino-tag="section" class="intro"></script>
This reads mds/intro.md. The .md extension is omitted. rino-type="markdown" is also supported, and the default wrapper is div when rino-tag is absent.
Markdown can also be written inline:
<script rino-type="markdown" rino-tag="section" type="text/markdown">
## Hello
This is **Markdown** inside an HTML file.
</script>
Build-time JavaScript and TypeScript
Template scripts run while Rino.js generates the page and insert their standard output into the HTML. They are not browser scripts.
<script rino-type="js" type="text/javascript">
import os from "os";
console.log(`<p>Built on ${os.type()}</p>`);
</script>
<script rino-type="ts" type="text/typescript">
const message: string = "Generated with TypeScript";
console.log(`<p>${message}</p>`);
</script>
Supported values are js, javascript, ts, and typescript. Template scripts may import Node.js modules. Build data is JSON in process.argv[1]; content templates also receive content data as the last process argument.
Inline asset exports
Small styles or browser scripts owned by a page or component can be collected into output files:
<style rino-export="/site.css">
.callout { padding: 1rem; }
</style>
<script rino-export="/site.js">
window.showMessage = () => alert("Hello");
</script>
The tags are removed from the final HTML and written to dist/styles/site.css and dist/scripts/site.js. Reference them normally. Use a .ts export path or rino-type="ts" to compile an export from TypeScript. Multiple tags may target one file: unique blocks are appended and exact duplicates are ignored. Export paths cannot contain ...
Functions needed by HTML event handlers may be attached to window, because bundled top-level declarations are scoped to the bundle.