Public
Edited
Mar 18, 2024
Importers
1 star
Double curly brackets are (optionally) can be used to define code blocks: ${format.inline(" before {{A {B ${C} ${ `x ${Y} z` } D} E}} after ")}.
format.block(`
before
\`\`\`ts
First Typescript Block
\`\`\`
\`\`\`js
Javascript Block
\`\`\`
\`\`\`
Simple Fenced Block
\`\`\`
after
`)
format = {
const md = (str) =>
readMd((Array.isArray(str) ? str : str ? [str] : [" "]).join(""));
return {
inline: (str) => formatInlineAst(md(str)),
block: (str) => formatAst(md(str))
};
}
function formatInlineAst(ast) {
return htl.html`<code style="display: inline-block; spase-wrap: nowrap;">${_formatAst(
ast
)}</code>`;
}
function _formatAst(node) {
const list = [];
const children = node.children || [];
let start = 0;
for (const child of children) {
const str = node.value.substring(start, child.start - node.start);
if (str) list.push(str);
list.push(_formatAst(child));
start = child.end - node.start;
}
const str = node.value.substring(start);
if (str) list.push(str);
const elm = htl.html`<span class="Md ${node.type}"">${list}</span>`;
if (node.type === "HtmlTag") {
elm.dataset["tag"] = node.children[0].tagName;
}
return elm;
}
function newMdReader(...contentReaders) {
const {
TokenizerContext,
newCodeReader,
newCompositeTokenizer,
newMdReader,
newBlockReader
} = tknz;
const readCode = newCodeReader();
const readNewCodeBlock = tknz.newTextFencedBlockReader(
"Code",
"{{",
"}}",
readCode
);
const contentTokenizers = [...contentReaders, readNewCodeBlock, readCode];
const readContent = newCompositeTokenizer(contentTokenizers);
const options = {
// readSectionTokens: readContent,
readHeaderTokens: readCode,
readOpenTagTokens: readCode,
readInstructionsTokens: readCode,
readTagContentTokens: readContent,
readBlockContent: readContent
};
const readToken = newBlockReader("MdDocument", newMdReader(options));
return (str) => {
const ctx = new TokenizerContext(str || "\n");
return readToken(ctx);
};
}
tknz = import("@statewalker/tknz@0.1.5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
