152 lines
3.6 KiB
HTML
152 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>showdown-katex</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/katex@0.10.0/dist/katex.min.css"
|
|
/>
|
|
<style>
|
|
code {
|
|
padding: 2px 4px !important;
|
|
}
|
|
#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 !important;
|
|
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
|
|
```
|
|
|
|
```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://unpkg.com/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>
|