Published
Edited
Sep 18, 2020
Importers
5 stars
mdPlus = mdIt
Es = ({
// escaped in markdown and Observable
Code: "\`", // inline code <-> markdown: "`" <-> string: "`" <-> template literal: "\`"
CB: "\`\`\`", // code block <-> markdown: "```" <-> string: "```" <-> template literal: "\`\`\`"
DS: "\$", // Show dollar sign "$" <-> markdown: "$" <-> string: "$" <-> template literal: "\$"
Bq: "\\\`", // Show backquote "`" <-> markdown: "\`" <-> string: "\\`" <-> template literal: "\\\`"
Bs: "\\\\" // Show backslash "\" <-> markdown: "\\" <-> string: "\\\\" <-> template literal: "\\\\"
});
require_dist = (module, options = {version: null, min: false}) => require(`${module}${options.version != null ? `@${options.version}` : ''}/dist/${module}${options.min ? '.min' : ''}.js`)
mdIns = require_dist('markdown-it-ins')
mdIt = template(text => {
var mdUtils = markdownIt().utils;
var md = markdownIt({
html: false,
linkify: true,
typographer: true,
breaks: false,
highlight: (str, lang) => {
if (lang && highlightJs.getLanguage(lang)) {
try {
return (
'<pre class="hljs"><code>' +
highlightJs.highlight(lang, str, true).value +
'</code></pre>'
);
} catch (__) {}
}
return (
'<pre class="hljs"><code>' + mdUtils.escapeHtml(str) + '</code></pre>'
);
}
})
.use(mdSub)
.use(mdSup)
.use(mdFootNote)
.use(mdDefList)
.use(mdAbbr)
.use(mdEmoji)
.use(mdContainer, 'message')
.use(mdContainer, 'notice')
.use(mdContainer, 'warning')
.use(mdContainer, 'caution')
.use(mdIns)
.use(mdMark)
.use(mdCheck)
.render(text);
var root = document.createElement('div');
root.innerHTML = md;
return root;
})
html`
<style>
blockquote, pre {
-webkit-print-color-adjust: exact;
background-color: #f5f5f5;
}
code {
-webkit-print-color-adjust: exact;
background-color: #f0f0f0;
}
.message, .notice, .warning, .caution {
width: fit-content;
height: fit-content;
padding: 0px 50px 0px 50px;
}
.message {
-webkit-print-color-adjust: exact;
background-color: skyblue;
}
.notice {
-webkit-print-color-adjust: exact;
background-color: lightgreen;
}
.warning {
-webkit-print-color-adjust: exact;
background-color: yellow;
}
.caution {
-webkit-print-color-adjust: exact;
background-color: red;
}
mark {
-webkit-print-color-adjust: exact;
background-color: yellow;
}
</style>
`
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.
