feat(templates): update basic examples; remove prism
This commit is contained in:
parent
3ae61b0183
commit
0812058748
4 changed files with 34 additions and 15 deletions
|
@ -1,3 +0,0 @@
|
|||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
File diff suppressed because one or more lines are too long
|
@ -10,7 +10,9 @@ class CodeBlockComponent extends HTMLElement {
|
|||
<div>
|
||||
<pre class="language-${lang} ${
|
||||
lineNumbers ? "line-numbers" : ""
|
||||
}" id="pre"><code id="code">${this.trimmed}</code></pre>
|
||||
}" id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;overflow:scroll"><code id="code">${
|
||||
this.trimmed
|
||||
}</code></pre>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
@ -1,14 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--
|
||||
Hello! This page is an example McFly page.
|
||||
See more on https://ayco.io/gh/McFly
|
||||
-->
|
||||
<my-head>
|
||||
<link rel="stylesheet" href="/prism.css" />
|
||||
<script src="/prism.js"></script>
|
||||
<script server:setup>
|
||||
/**
|
||||
* This server:setup script block will get evaluated on the server
|
||||
* ...then get stripped away, leaving just the HTML
|
||||
* */
|
||||
const name = "McFly";
|
||||
</script>
|
||||
</my-head>
|
||||
<body>
|
||||
<!--
|
||||
This element below is a static HTML fragment, found in ./components/awesome-header.html
|
||||
-->
|
||||
<awesome-header></awesome-header>
|
||||
<main>
|
||||
<!--
|
||||
any varible declared in a server:setup script can be used on the page
|
||||
-->
|
||||
<h2>Welcome to {{name}}</h2>
|
||||
|
||||
<p>
|
||||
Here's a vanilla custom element:
|
||||
<vanilla-hello-world data-name="McFly" />
|
||||
<vanilla-hello-world data-name="{{name}}" />
|
||||
</p>
|
||||
|
||||
<!--
|
||||
this is just a code-block element, found in ./components/code-block.html
|
||||
(not an actual JS code)
|
||||
-->
|
||||
<code-block language="js">
|
||||
<pre>
|
||||
class HelloWorld extends HTMLElement {
|
||||
|
@ -32,6 +56,9 @@ class HelloWorld extends HTMLElement {
|
|||
>
|
||||
</code-block>
|
||||
</main>
|
||||
<!--
|
||||
Here's another static .html fragment, found in ./components/my-footer.html
|
||||
-->
|
||||
<my-footer></my-footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue