ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

code-block example

Browse source
This commit is contained in:
Ayo 2023-10-19 20:59:44 +02:00
parent 3c982fe7de
commit da36eb9c94
2 changed files with 16 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/code-block.js
View file

@ -1,39 +1,17 @@
// @ts-check
class CodeBlockComponent extends HTMLElement { class CodeBlockComponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() { connectedCallback() {
const trimmed = this.innerHTML.trim(); this.trimmed = this.innerHTML.trim();
const lang = this.getAttribute("language");
const lineNumbers = this.getAttribute("line-numbers") === "true";
this.css({ console.log(lineNumbers, lang);
color: "orange",
margin: "1em 0",
padding: "1em",
fontWeight: "bold",
fontSize: "x-large",
display: "block",
backgroundColor: "#eee",
});
const template = ` this.innerHTML = `
<div> <div>
<pre class="language-${this.lang}" id="pre"><code id="code">${trimmed}</code></pre> <pre class="language-${lang} ${
lineNumbers ? "line-numbers" : ""
}" id="pre"><code id="code">${this.trimmed}</code></pre>
</div> </div>
`; `;
this.innerHTML = template;
}
/**
* Apply css to an element
* @param {Partial<CSSStyleDeclaration>} style
* @param {HTMLElement} element
*/
css(style, element = null) {
let el = element ?? this;
for (const property in style) el.style[property] = style[property];
} }
} }

9
src/pages/demo/index.html
View file

@ -1,6 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<my-head> <my-head>
<link rel="stylesheet" href="/prism.css" />
<script src="/prism.js"></script>
<script server:setup> <script server:setup>
const name = "AYOs"; const name = "AYOs";
let greeting = "hello"; let greeting = "hello";
@ -25,7 +27,12 @@
<p>some text: {{greeting}}</p> <p>some text: {{greeting}}</p>
{{greeting}} hey<br /> {{greeting}} hey<br />
<clickable-text></clickable-text> <clickable-text></clickable-text>
<code-block lang="css"> const hey = "AYO" </code-block> <code-block language="js" line-numbers="true">
<pre>
const hey = "AYO";
console.log(hey)
</pre>
</code-block>
</main> </main>
<my-footer></my-footer> <my-footer></my-footer>