markdeep`# Wrapping Markeep into a Tagged Template
[Markdeep][] is an alternative to Markdown by Morgan McGuire. It features a lot more bells and whistles than the standard Markdown markup language. For example, it has ASCII diagram support:
~~~~~~~~~~~~~~~~none
markdeep\`
*************************************
* _______ *
* .-------. / / .-----. *
* | Write +-+->/ Edit ++->| Share | *
* '-------' ^ /______/ | '-----' *
* | | *
* '--------' *
*************************************
\`
~~~~~~~~~~~~~~~~
*************************************
* _______ *
* .-------. / / .-----. *
* | Write +-+->/ Edit ++->| Share | *
* '-------' ^ /______/ | '-----' *
* | | *
* '--------' *
*************************************
This notebook is an attempt to wrap Markdeep into a tagged template that can easily be used as a drop-in replacement for standard Markdown.
Below I have copied most of raw markup of [the features page](https://casual-effects.com/markdeep/features.md.html), converting it section by section using said template literal.
As you can see, not everything is working yet. For example, rendering ${tex`\TeX`.outerHTML} does not work yet. For now there is a way around that using the existing tagged template literal:
~~~~~~~~~~~~~~~~none
${'${tex`\\TeX`.outerHTML}'}
~~~~~~~~~~~~~~~~
Admittedly, this is a bit of a pain, so hopefully that can be autodetected in the future.
A second limitation is maximum cell size. This may mess up numbering for headers in longer documents.
*~~Another major gotcha is the diagrams: they use\` \ \` for diagonal lines, but those need to be escaped when used in a tagged template literal. See source code of the diagram section below.~~* This was fixed with raw strings and a regex.
[Markdeep]: https://casual-effects.com/markdeep/
`
markdeep = {
if (!window.markdeepOptions) {
window.markdeepOptions = {mode: 'script', detectMath: false};
await require("https://casual-effects.com/markdeep/latest/markdeep.min.js");
}
const unescape = /(\\[$`])/g;
return (strings, ...exprs)=> {
let template = '';
for(let i = 0; i < strings.length-1; i++){
template += strings.raw[i] + exprs[i];
}
template += strings.raw[strings.length-1];
template = template.replace(unescape, '`');
const output = window.markdeep.format(template);
return html`${output}`;
}
}
markdeepStylesheet = {
let i = 0; // give markdeep time to load on page load/refresh
while (!(window.markdeep && window.markdeep.stylesheet)) {
if (++i > 20) break;
await Promises.delay(100);
}
return html `
<style>${window.markdeep.stylesheet()}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow-night.min.css" integrity="sha256-2wL88NKUqvJi/ExflDzkzUumjUM73mcK2gBvBBeLvTk=" crossorigin="anonymous" />
<style>
/* Remove numbers from headers */
.md h1:before, .md h2:before, .md h3:before, .md h4:before, .md h5:before {content: none;}
/* Darken table header text and tone down even TR's */
.md table.table th {color:#000;}
.md table.table tr:nth-child(even) {background-color:#CCC; color:#000;}
/* Examples background and text to match Observable Dark */
.md pre.listing.tilde {background-color:#333; color:#FFF;}
/* Change color of diagrams and darken circle around open dots */
.md svg.diagram {stroke: #C5C5C5; fill: #C5C5C5;}
.md svg.diagram .opendot {stroke: #858585; fill: #FFF;}
/* Grey shade multi-block example */
.md code > .output {background: #979797;}
/* highlight.js brighten function and title names */
.hljs-function .hljs-title {color: #DD7272;}
</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.
