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

refactor(core): simpler code-block element

Browse source
This commit is contained in:
Ayo 2023-11-12 16:42:23 +01:00
parent 5e6ab37598
commit cb503f7ca3
2 changed files with 8 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
site/src/components/code-block.js
View file

@ -2,18 +2,17 @@ class CodeBlockComponent extends HTMLElement {
connectedCallback() { connectedCallback() {
this.trimmed = this.innerHTML.trim(); this.trimmed = this.innerHTML.trim();
const lang = this.getAttribute("language"); const lang = this.getAttribute("language");
const lineNumbers = this.getAttribute("line-numbers") === "true";
console.log(lineNumbers, lang);
this.innerHTML = ` this.innerHTML = `
<div> <pre id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
<pre class="language-${lang} ${
lineNumbers ? "line-numbers" : ""
}" id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
this.trimmed this.trimmed
}</code></pre> }</code></pre>
</div>
`; `;
if (lang) {
const pre = this.querySelector('#pre')
pre.className = `language-${lang}`;
}
} }
} }

3
site/src/pages/demo.html
View file

@ -65,7 +65,6 @@
<section id="breakdown"> <section id="breakdown">
<h2>Let's Break it Down</h2> <h2>Let's Break it Down</h2>
<code-block language="html" line-numbers="true"> <code-block language="html" line-numbers="true">
<pre>
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt; &lt;html lang=&quot;en&quot;&gt;
&lt;my-head&gt; &lt;my-head&gt;
@ -95,7 +94,7 @@
&lt;p&gt;&lt;a href="&#123;&#123;greeting.url&#125;&#125;"&gt;some text: &#123;&#123;greeting.message&#125;&#125;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="&#123;&#123;greeting.url&#125;&#125;"&gt;some text: &#123;&#123;greeting.message&#125;&#125;&lt;/a&gt;&lt;/p&gt;
&lt;clickable-text&gt;&lt;/clickable-text&gt; &lt;clickable-text&gt;&lt;/clickable-text&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt;</pre> &lt;/html&gt;
</code-block> </code-block>
</section> </section>
</main> </main>