From da36eb9c9410e2abeca777106b418c186c645005 Mon Sep 17 00:00:00 2001 From: Ayo Date: Thu, 19 Oct 2023 20:59:44 +0200 Subject: [PATCH] code-block example --- src/components/code-block.js | 38 ++++++++---------------------------- src/pages/demo/index.html | 9 ++++++++- 2 files changed, 16 insertions(+), 31 deletions(-) diff --git a/src/components/code-block.js b/src/components/code-block.js index 939857b..31fca27 100644 --- a/src/components/code-block.js +++ b/src/components/code-block.js @@ -1,39 +1,17 @@ -// @ts-check - class CodeBlockComponent extends HTMLElement { - constructor() { - super(); - } - 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({ - color: "orange", - margin: "1em 0", - padding: "1em", - fontWeight: "bold", - fontSize: "x-large", - display: "block", - backgroundColor: "#eee", - }); + console.log(lineNumbers, lang); - const template = ` + this.innerHTML = `
- 
${trimmed}
+ 
${this.trimmed}
`; - - this.innerHTML = template; - } - - /** - * Apply css to an element - * @param {Partial} style - * @param {HTMLElement} element - */ - css(style, element = null) { - let el = element ?? this; - for (const property in style) el.style[property] = style[property]; } } diff --git a/src/pages/demo/index.html b/src/pages/demo/index.html index dc66031..a1289aa 100644 --- a/src/pages/demo/index.html +++ b/src/pages/demo/index.html @@ -1,6 +1,8 @@ + +