@jhuix/showdowns
Version:
A lib that make markdown to html with some extensions of showdown.js.
156 lines (144 loc) • 4.18 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="../favicon.ico" />
<title>showdowns demo</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
html {
box-sizing: border-box;
font-size: 62.5%;
line-height: 1.5;
height: 100%;
}
*,
:after,
:before {
box-sizing: inherit;
}
body {
background: #f9f9f9;
min-height: 100%;
position: relative;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
Segoe UI Emoji;
-webkit-font-smoothing: antialiased;
font-size: 1.5rem;
}
code {
background-color: #f8f8f8;
border-color: #dfdfdf;
color: #333;
}
.workspace-container {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: rgb(241, 241, 241);
border-radius: 0;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: rgba(0, 0, 0, 0.25);
transition: color 0.2s ease;
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(128, 135, 139, 0.8);
}
</style>
<link rel="stylesheet" href="../dist/showdowns.min.css" />
</head>
<body>
<div id="main" class="workspace-container main-toc-row"></div>
<script src="../dist/showdowns.min.js"></script>
<script>
(function(element) {
showdowns.setShowdownOptions({
flavor: "github"
});
showdowns.setPlantumlOptions({
imageFormat: "svg"
});
showdowns.setVegaOptions({
renderer: "svg"
});
showdowns.init();
let md = "";
let mdCssTypes = null;
window
.fetch("https://jhuix.github.io/showdowns/showdowns-features.md")
.then(function(response) {
if (response.ok) {
return response.text();
}
})
.then(function(text) {
md = text;
return window.fetch("https://jhuix.github.io/showdowns/Showdown's-Markdown-syntax.md");
})
.then(function(response) {
if (response.ok) {
return response.text();
}
})
.then(function(text) {
md = md + `\n\n# Showdown's Markdown syntax\n\n` + text;
showdowns
.makeHtml(md, csstypes => {
mdCssTypes = csstypes;
})
.then(res => {
if (typeof res === 'object') {
element.innerHTML = res.html;
showdowns.completedHtml(res.scripts);
} else {
element.innerHTML = res;
}
})
.catch(err => {
element.innerText = err;
});
})
.catch(function(error) {
console.log(error);
if (md) {
showdowns
.makeHtml(md, csstypes => {
mdCssTypes = csstypes;
})
.then(res => {
if (typeof res === 'object') {
element.innerHTML = res.html;
showdowns.completedHtml(res.scripts, '.showdowns');
} else {
element.innerHTML = res;
}
})
.catch(err => {
element.innerText = err;
});
}
});
})(document.getElementById("main"));
</script>
</body>
</html>