From d67f3514eff4f45ad1ca84cde6465e622acd4dcc Mon Sep 17 00:00:00 2001 From: flu0r1ne Date: Thu, 7 Sep 2023 21:28:37 -0500 Subject: Scoped global styling to all markdown Make React compatible with markdown-style HTML by added components with identical styling to markdown. This is done while CSS scoping is maintained. Additional style is loaded through the markdown loader by injecting default-styling tags into the components. This allows default-margin to be added to these elements in addition to the styling found in the React elements. The homepage reflects the domain, as defined by an environmental variable. --- loaders/marked-renderer.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++ loaders/marked.js | 4 +- 2 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 loaders/marked-renderer.js (limited to 'loaders') diff --git a/loaders/marked-renderer.js b/loaders/marked-renderer.js new file mode 100644 index 0000000..0b55304 --- /dev/null +++ b/loaders/marked-renderer.js @@ -0,0 +1,92 @@ +const prefix = "md-"; +const selectall = `${prefix}dl`; + +const renderer = { + // Block-level methods + code(code, infostring, escaped) { + return `
${code}
`; + }, + blockquote(quote) { + return `
${quote}
`; + }, + html(html, block) { + return block ? html : `${html}`; + }, + heading(text, level, raw, slugger) { + return `${text}`; + }, + hr() { + return `
`; + }, + list(body, ordered, start) { + const tag = ordered ? 'ol' : 'ul'; + return `<${tag} class="${selectall} ${prefix}list ${prefix}${tag}"${ordered && start !== 1 ? ` start="${start}"` : ''}>${body}`; + }, + listitem(text, task, checked) { + let classList = `${prefix}li`; + + if(task) { + classList += ` ${prefix}li-checkbox`; + } else { + classList += ` ${prefix}li-nocheckbox`; + } + + return `
  • ${text}
  • `; + }, + checkbox(checked) { + return ``; + }, + paragraph(text) { + return `

    ${text}

    `; + }, + table(header, body) { + return `${header}${body}
    `; + }, + tablerow(content) { + return `${content}`; + }, + tablecell(content, flags) { + const type = flags.header ? 'th' : 'td'; + return `<${type} class="${selectall} ${prefix}${type}">${content}`; + }, + + // Inline-level methods + strong(text) { + return `${text}`; + }, + em(text) { + return `${text}`; + }, + codespan(code) { + return `${code}`; + }, + br() { + return `
    `; + }, + del(text) { + return `${text}`; + }, + link(href, title, text) { + return `${text}`; + }, + image(href, title, text) { + return `${text}`; + }, + text(text) { + return text; // text-level elements typically don't have classes + }, +}; + +const hooks = { + postprocess(html) { + return `
    ${html}
    `; + }, + preprocess(md) { + return md; + } +}; + +module.exports = { + renderer, + hooks +}; diff --git a/loaders/marked.js b/loaders/marked.js index f3c8fcb..a1ed8c3 100644 --- a/loaders/marked.js +++ b/loaders/marked.js @@ -1,15 +1,17 @@ const { Marked } = require('marked'); const { markedHighlight } = require('marked-highlight'); const hljs = require('highlight.js'); +const { renderer, hooks } = require('./marked-renderer.js'); module.exports = function loader(source) { const marker = new Marked( + { renderer, hooks }, markedHighlight({ highlight(code, lang) { const language = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language }).value; } - }) + }), ); return marker.parse(source); -- cgit v1.2.3