Image support
- Allow data: URIs in Remarkable - Load Remarkable after the main JS has run - CSS for images
This commit is contained in:
parent
8664b7156f
commit
3ddc8d8cea
|
@ -160,6 +160,11 @@ a {
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
.text img {
|
||||
max-width: 100%;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.extended-text {
|
||||
margin-top: 1em;
|
||||
display: inline-block; /*Needs to be inline-block, so that margin on it works*/
|
||||
|
|
|
@ -40,28 +40,9 @@
|
|||
<!-- <a href="/post" style="color: var(--text-color); margin-left: 100px; text-decoration: none">POST</a>-->
|
||||
<!-- {% endif %}</footer>-->
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
|
||||
|
||||
<!--Remarkable UMD bundle, includes linkify and Remarkable in the global remarkable-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Remarkable ES6 module
|
||||
// import { Remarkable } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/index.browser.min.js";
|
||||
// import { linkify } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/linkify.js";
|
||||
|
||||
const md = new remarkable.Remarkable({
|
||||
html: true, breaks: true, typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
return hljs.highlight(lang, str).value;
|
||||
}
|
||||
return hljs.highlightAuto(str).value;
|
||||
}
|
||||
}).use(remarkable.linkify);
|
||||
|
||||
const els = document.querySelectorAll(".thought");
|
||||
|
||||
for (let el of els) {
|
||||
const extended = el.querySelector(".extended-text");
|
||||
const mainText = el.querySelector(".main-text");
|
||||
|
@ -83,10 +64,6 @@
|
|||
main.appendChild(showMoreButton);
|
||||
}
|
||||
|
||||
//Markdown + highlight
|
||||
extended.innerHTML = md.render(extended.innerHTML);
|
||||
mainText.innerHTML = md.render(mainText.innerHTML);
|
||||
|
||||
const timestampEl = el.querySelector(".timestamp");
|
||||
const time = new Date(timestampEl.textContent);
|
||||
const ampm = time.getHours() >= 12 ? "pm" : "am";
|
||||
|
@ -101,5 +78,42 @@
|
|||
timestampEl.textContent = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}, ${hours}:${minutes}${ampm}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
|
||||
|
||||
<!--Remarkable UMD bundle, includes linkify and Remarkable in the global remarkable-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Remarkable ES6 module
|
||||
// import { Remarkable } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/index.browser.min.js";
|
||||
// import { linkify } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/linkify.js";
|
||||
|
||||
const md = new remarkable.Remarkable({
|
||||
html: true, breaks: true, typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
return hljs.highlight(lang, str).value;
|
||||
}
|
||||
return hljs.highlightAuto(str).value;
|
||||
}
|
||||
}).use(remarkable.linkify);
|
||||
|
||||
// Allow data: URIs for images, from https://github.com/jonschlinkert/remarkable/issues/329
|
||||
const originalLinkValidator = md.inline.validateLink;
|
||||
const dataLinkRegex = /^\s*data:([a-z]+\/[a-z]+(;[a-z-]+=[a-z-]+)?)?(;base64)?,[a-z0-9!$&'',()*+,;=\-._~:@/?%\s]*\s*$/i;
|
||||
|
||||
md.inline.validateLink = (url) => originalLinkValidator(url) || url.match(dataLinkRegex);
|
||||
|
||||
for (let el of els) {
|
||||
const extended = el.querySelector(".extended-text");
|
||||
const mainText = el.querySelector(".main-text");
|
||||
|
||||
//Markdown + highlight
|
||||
extended.innerHTML = md.render(extended.innerHTML);
|
||||
mainText.innerHTML = md.render(mainText.innerHTML);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue