41 lines
895 B
JavaScript
41 lines
895 B
JavaScript
class CodeBlockComponent extends HTMLElement {
|
|
connectedCallback() {
|
|
const trimmed = this.innerHTML.trim();
|
|
const lang = this.getAttribute("language");
|
|
const inline = this.getAttribute("inline") !== null;
|
|
|
|
this.innerHTML = `
|
|
<pre id="pre"><code id="code">${trimmed}</code></pre>
|
|
`;
|
|
|
|
/**
|
|
* @type {HTMLPreElement}
|
|
*/
|
|
const pre = this.querySelector("#pre");
|
|
|
|
if (lang) {
|
|
pre.className = `language-${lang}`;
|
|
}
|
|
|
|
/**
|
|
* @type {Partial<CSSStyleDeclaration>}
|
|
*/
|
|
const style = {
|
|
background: "#f5f2f0",
|
|
padding: "1em",
|
|
margin: "1em 0",
|
|
fontSize: "large",
|
|
overflow: "auto",
|
|
borderRadius: '5px'
|
|
};
|
|
|
|
if (inline) {
|
|
style.display = 'inline';
|
|
style.padding = '0.25em 0.3em';
|
|
}
|
|
|
|
Object.keys(style).forEach((rule) => {
|
|
pre.style[rule] = style[rule];
|
|
});
|
|
}
|
|
}
|