Public
Edited
Dec 8, 2024
Importers
Insert cell
Insert cell
mdPlus`This is a checkbox, {red}(supported by) combining [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists).

# first heading 1 10°

$$
\\frac{\\frac{2}{3}-1}{\\frac{8}{9}}
$$

# 11 Jaká je velikost rozdílu úhlů $\\gamma -\\alpha C$?
Velikost úhlů neměřte, ale vypočítejte (obrázek je ilustrační).$10\\deg$
- [A] $10 \\circle$
- [B] $11 \\degree$
- [C] $12 \\degree$
- [D] $13 \\degree$
- [E] jiná velikost


$$
\\left(2\\div\\frac{3}{2}\\right)\\div\\frac{1}{2}+\\left(\\frac{5}{6}\\div\\frac{3}{4}\\right)\\div\\frac{2}{3}
$$

Tereza a její kamarádka Nikola píší novoroční přání. Všechna přání mají stejný text a každá z dívek píše stálou rychlostí. Tereza za každých 5 minut napíše 14 novoročenek, zatímco Nikola 10.

$\\frac{1}{2}$
$\\beta=$

$$
\\frac{1}{2}
$$


- [ ] Checklist
- [ ] Chore 1
- [x] Chore 2
- [x] Chore 3
- [ ] Chore 4
- [ ] Chore 5`
Insert cell
Insert cell
md`### Helper Functions and Imports`
Insert cell
Insert cell
Insert cell
katex = import('https://cdn.skypack.dev/markdown-it-katex@2.0.3?min')
Insert cell
Insert cell
textBgColor = import('https://cdn.skypack.dev/markdown-it-color-plus@0.0.1?min');
Insert cell
inlineTextColor = import('https://cdn.skypack.dev/@gerhobbelt/markdown-it-inline-text-color@1.0.1-1?min')
Insert cell
Insert cell
ATXRenderer = function () {
const mapping = {
h1: "h2",
h2: "h3"
};
function getTagName(token) {
return token.markup == "-" || token.markup == "="
? "h2"
: mapping[token.tag] ?? token.tag;
}

function open(tokens, idx) {
const token = tokens[idx];
const tag = getTagName(token);

return `<${tag}>`;
}

function close(tokens, idx) {
const token = tokens[idx];
const tag = getTagName(token);

return `</${tag}>`;
}

return function (md) {
// Custom rule to wrap the first word of H1 headings in a <span>
md.core.ruler.push("wrap_first_word_in_h1", function (state) {
// Iterate over all tokens in the markdown content
state.tokens.forEach((token, i) => {
// Check if it's an opening tag for a heading and it's a first-level heading (h1)
if (token.type === "heading_open" && token.tag === "h1") {
const inlineToken = state.tokens[i + 1]; // The next token is the inline token that holds the content

if (inlineToken.type === "inline") {
// Find the first text token in the inline token's children
const textToken = inlineToken.children.find(
(child) => child.type === "text"
);

if (textToken) {
// Split the text content into words
const words = textToken.content.split(" ");

if (words.length > 0) {
// Modify the content: replace the first word with an HTML span and keep the rest as text
const firstWord = words.shift(); // Extract the first word

// Create a new token for the span-wrapped first word
const firstWordToken = new state.Token("html_inline", "", 0);
firstWordToken.content = `<span>${firstWord}</span>`;

// Update the original text token to contain the remaining words
textToken.content = textToken.content.substr(firstWord.length);

// Insert the new firstWordToken before the textToken in the children array
inlineToken.children.unshift(firstWordToken);
}
}
}
}
});
});
md.renderer.rules.heading_open = open;
md.renderer.rules.heading_close = close;
};
}
Insert cell
mdPlus = template(
(text) => {
var root = document.createElement("div");

//var css = 'p { max-width: revert;}';
var head = document.head || document.getElementsByTagName("head")[0];
const href =
"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css";
const existingLink = document.querySelector(`head link[href="${href}"]`);
if (!existingLink) {
var link = document.createElement("link");
head.appendChild(link);

link.rel = "stylesheet";
link.href = href;
}
// var style = document.createElement('style');
// head.appendChild(style);

// style.type = 'text/css';
// if (style.styleSheet){
// // This is required for IE8 and below.
// style.styleSheet.cssText = css;
// } else {
// style.appendChild(document.createTextNode(css));
// }

//root.style.setProperty("column-width","300px");
root.innerHTML = markdownIt()
.use(taskLists, { enabled: true })
.use(katex.default, {
svg: {
scale: 2
}
})
.use(sup.default)
.use(textBgColor.default, { inline: false, isMultiLine: true })
.use(html5Media.default, {
html5embed: {
useImageSyntax: false, // Enables video/audio embed with ![]() syntax (default)
useLinkSyntax: true // Enables video/audio embed with []() syntax
}
})
.use(ATXRenderer())
.render(text);
return root;
},
() => {
return document.createElement("div");
}
)
Insert cell
Insert cell
Insert cell

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.
Learn more