mirror of
https://github.com/avinal/avinal.github.io.git
synced 2026-07-04 07:40:09 +05:30
100 lines
3.9 KiB
HTML
100 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/website/mdn-style.css">
|
|
<link rel="stylesheet" href="/website/foo-style.css">
|
|
|
|
<title>Document</title>
|
|
<script src="/website/redirect.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<script src="/website/app.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="/website/prism.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|
<script>
|
|
var app = Elm.Main.init({ node: document.getElementById("app") });
|
|
|
|
app.ports.sendString.subscribe(function (markdowndata) {
|
|
|
|
var numberOfHeadings = 0;
|
|
let toc = '';
|
|
const renderer = new marked.Renderer();
|
|
const sections = [];
|
|
renderer.heading = (text, level) => {
|
|
if (level === 1) {
|
|
return `<h${level}>${text}</h${level}>`
|
|
}
|
|
const escapedText = text.trim().toLowerCase().replace(/[^\w]+/g, '-');
|
|
const endSection = `</div></section>`;
|
|
const sectionContent = `
|
|
<section aria-labelledby="${escapedText}">
|
|
<h${level} id="${escapedText}">
|
|
<a title="Permalink to ${text}" href="#${escapedText}">
|
|
${text}
|
|
</a>
|
|
</h${level}>
|
|
<div class="section-content">`;
|
|
toc += `<li class="document-toc-item"><a class="document-toc-link" href="#${escapedText}">${text}</a></li>`;
|
|
if (numberOfHeadings === 0) {
|
|
numberOfHeadings++;
|
|
return sectionContent;
|
|
} else {
|
|
return endSection + sectionContent;
|
|
}
|
|
};
|
|
|
|
renderer.blockquote = (text) => {
|
|
return `<div id="sect3" class="notecard note">${text}</div>`;
|
|
};
|
|
|
|
marked.setOptions({
|
|
renderer: renderer,
|
|
highlight: function (code, lang) {
|
|
console.log(Prism.languages);
|
|
const grammar = Prism.languages[lang];
|
|
if (!grammar) {
|
|
console.warn(
|
|
`Unable to find a Prism grammar for '${lang}'`
|
|
);
|
|
return; // bail!
|
|
}
|
|
return Prism.highlight(code, grammar, lang);
|
|
}
|
|
})
|
|
document.getElementById("insert-here").innerHTML = marked.parse(markdowndata);
|
|
// document.getElementById("toc-entries").innerHTML = toc;
|
|
});
|
|
$(function () {
|
|
// copy-btn HTML
|
|
var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
|
|
btn += '<i class="far fa-clone"></i>';
|
|
btn += '</span>';
|
|
// mount it!
|
|
$(".highlight table").before(btn);
|
|
var clip = new ClipboardJS('.btn-copy', {
|
|
text: function (trigger) {
|
|
return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
|
|
}
|
|
});
|
|
clip.on('success', function (e) {
|
|
e.trigger.setAttribute('aria-label', "Copied!");
|
|
e.clearSelection();
|
|
})
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |