@vincenttam/showdown-katex
Version:
Showdown extension that adds LaTeX, ASCIImath and mhchem support
156 lines (139 loc) • 3.95 kB
HTML
<html>
<head>
<title>showdown-katex</title>
<link
rel="stylesheet"
href="https://unpkg.com/katex@0.16.2/dist/katex.min.css"
/>
<style>
code {
padding: 2px 4px ;
}
#sandbox {
background-color: silver;
}
#sandbox > .col-md-6 > #sandbox-out,
#sandbox > .col-md-6 > #sandbox-in {
border: none;
box-sizing: border-box;
height: 350px;
padding: 10px;
resize: none;
width: 100%;
}
#sandbox-in {
margin: 10px auto;
background: #000;
color: #fff;
font: 14px Menlo, monospace;
}
#sandbox-in:focus {
outline: none ;
border: 1px solid red;
box-shadow: 0 0 10px #719ece;
}
#sandbox-out {
color: black;
margin: 20px auto;
background: white;
}
</style>
</head>
<body style="display:none;" onload="document.body.style.display = 'block'">
<!-- readme -->
<bootmark src="README.md"></bootmark>
<!-- sandboxed demo -->
<div class="container">
<div class="row">
<h3>Try the live demo</h3>
</div>
<div class="row" id="sandbox">
<div class="col-md-6">
<h4 class="text-center">
Input Markdown
</h4>
<textarea id="sandbox-in">
#### Some Markdown Here
```asciimath
g(x) = 3x^4 + 2x^2
```
```latex
\sum_{i=1}^n i^3 = \left( \frac{n(g(n)+1)} 2 \right) ^2
```
```latex
C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}
```
```js
var some = normal('code');
```
</textarea>
</div>
<div class="col-md-6">
<h4 class="text-center">
Output
</h4>
<div id="sandbox-out"></div>
</div>
</div>
<hr />
</div>
<!-- examples -->
<bootmark src="examples.md"></bootmark>
<!-- changelog -->
<bootmark src="CHANGELOG.md"></bootmark>
<script src="https://unpkg.com/bootmark@0.8.0/dist/bootmark.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vincenttam/showdown-katex@latest/dist/showdown-katex.min.js"></script>
<script>
// define options. options in individual elements override these
// these do not affect the live demo
$.fn.bootmark.options = {
html: {
toc: false,
prettifyTheme: 'tomorrow-night-eighties',
},
showdown: {
extensions: [showdownKatex()],
},
};
// sandboxed live demo
$(function() {
var $input = $('#sandbox-in');
var $output = $('#sandbox-out');
try {
var params = new URLSearchParams(location.search);
var source = params.get('source');
if (source) {
$input.val(source);
}
} catch (e) {
// URLSearchParams is not supported everywhere
}
function render(e) {
var val = $input.val();
try {
var params = new URLSearchParams();
params.set('source', val);
if (e) {
// only set ?source when the user types in the box
var url = location.origin + '?' + params.toString();
history.pushState({ path: url }, document.title, url);
}
} catch (e) {
// URLSearchParams is not supported everywhere
}
$output.bootmark({
// markdown passed directly
markdown: val,
template: {
// "export" only the html produced
text: '${bootmark}',
},
});
}
$input.bind('input propertychange', render);
render();
});
</script>
</body>
</html>