Skip to content

Commit e57d845

Browse files
djthorpedjthorpe
committed
Added code element
1 parent f5d56dc commit e57d845

File tree

7 files changed

+229
-9
lines changed

7 files changed

+229
-9
lines changed

‎package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
},
3535
"dependencies": {
3636
"bootstrap-icons": "^1.11.3",
37+
"highlight.js": "^11.9.0",
3738
"lit": "^3.1.2"
3839
},
3940
"files": [

‎src/index.html

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,35 @@
4848
</wc-sidebar>
4949
<wc-content>
5050

51+
52+
<div class="container">
53+
<h1>Code</h1>
54+
<div style="background-color: #fcfcfc; padding: 5px;">
55+
<wc-code language="javascript">
56+
console.log('hello');
57+
console.log('hello');
58+
console.log('hello');
59+
60+
/* this is some more javascript */
61+
console.log('hello');
62+
</wc-code>
63+
</div>
64+
</div>
65+
<hr>
66+
5167
<div class="container">
5268
<h1>Tab Group</h1>
5369
<div style="background-color: #fcfcfc; padding: 5px;">
54-
<wc-tab-group backgroundColor="light">
55-
<wc-tab name="tab-tables" selected><wc-icon name="table" size="medium"></wc-icon> Tables</wc-tab>
56-
<wc-tab name="tab-buttons">Buttons</wc-tab>
57-
<wc-tab name="tab-badges">Badges</wc-tab>
58-
<wc-tab name="tab-icons">Icons</wc-tab>
59-
<wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon> Disabled</wc-tab>
60-
</wc-tab-group>
70+
<wc-tab-group backgroundColor="light">
71+
<wc-tab name="tab-tables" selected><wc-icon name="table" size="medium"></wc-icon> Tables</wc-tab>
72+
<wc-tab name="tab-buttons">Buttons</wc-tab>
73+
<wc-tab name="tab-badges">Badges</wc-tab>
74+
<wc-tab name="tab-icons">Icons</wc-tab>
75+
<wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon>
76+
Disabled</wc-tab>
77+
</wc-tab-group>
78+
</div>
6179
</div>
62-
</div>
6380
<hr>
6481

6582
<div class="container">
@@ -75,7 +92,7 @@ <h1>Tables</h1>
7592
</script>
7693
</div>
7794
<hr>
78-
95+
7996
<div class="container">
8097
<h1>Buttons</h1>
8198

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import './document.css';
66
import './badge/badge';
77
import './nav/nav';
88
import './table/table';
9+
import './layout/layout';
910

1011
// Other
1112
import './esbuild';

‎src/layout/CodeElement.css.js

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { css } from 'lit';
2+
3+
export const style = css`
4+
.hljs {
5+
color: #24292e;
6+
background: #ffffff;
7+
}
8+
9+
.hljs-doctag,
10+
.hljs-keyword,
11+
.hljs-meta .hljs-keyword,
12+
.hljs-template-tag,
13+
.hljs-template-variable,
14+
.hljs-type,
15+
.hljs-variable.language_ {
16+
/* prettylights-syntax-keyword */
17+
color: #d73a49;
18+
}
19+
20+
.hljs-title,
21+
.hljs-title.class_,
22+
.hljs-title.class_.inherited__,
23+
.hljs-title.function_ {
24+
/* prettylights-syntax-entity */
25+
color: #6f42c1;
26+
}
27+
28+
.hljs-attr,
29+
.hljs-attribute,
30+
.hljs-literal,
31+
.hljs-meta,
32+
.hljs-number,
33+
.hljs-operator,
34+
.hljs-variable,
35+
.hljs-selector-attr,
36+
.hljs-selector-class,
37+
.hljs-selector-id {
38+
/* prettylights-syntax-constant */
39+
color: #005cc5;
40+
}
41+
42+
.hljs-regexp,
43+
.hljs-string,
44+
.hljs-meta .hljs-string {
45+
/* prettylights-syntax-string */
46+
color: #032f62;
47+
}
48+
49+
.hljs-built_in,
50+
.hljs-symbol {
51+
/* prettylights-syntax-variable */
52+
color: #e36209;
53+
}
54+
55+
.hljs-comment,
56+
.hljs-code,
57+
.hljs-formula {
58+
/* prettylights-syntax-comment */
59+
color: #6a737d;
60+
}
61+
62+
.hljs-name,
63+
.hljs-quote,
64+
.hljs-selector-tag,
65+
.hljs-selector-pseudo {
66+
/* prettylights-syntax-entity-tag */
67+
color: #22863a;
68+
}
69+
70+
.hljs-subst {
71+
/* prettylights-syntax-storage-modifier-import */
72+
color: #24292e;
73+
}
74+
75+
.hljs-section {
76+
/* prettylights-syntax-markup-heading */
77+
color: #005cc5;
78+
font-weight: bold;
79+
}
80+
81+
.hljs-bullet {
82+
/* prettylights-syntax-markup-list */
83+
color: #735c0f;
84+
}
85+
86+
.hljs-emphasis {
87+
/* prettylights-syntax-markup-italic */
88+
color: #24292e;
89+
font-style: italic;
90+
}
91+
92+
.hljs-strong {
93+
/* prettylights-syntax-markup-bold */
94+
color: #24292e;
95+
font-weight: bold;
96+
}
97+
98+
.hljs-addition {
99+
/* prettylights-syntax-markup-inserted */
100+
color: #22863a;
101+
background-color: #f0fff4;
102+
}
103+
104+
.hljs-deletion {
105+
/* prettylights-syntax-markup-deleted */
106+
color: #b31d28;
107+
background-color: #ffeef0;
108+
}
109+
110+
.hljs-char.escape_,
111+
.hljs-link,
112+
.hljs-params,
113+
.hljs-property,
114+
.hljs-punctuation,
115+
.hljs-tag {
116+
/* purposely ignored */
117+
}
118+
`;

‎src/layout/CodeElement.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
LitElement, html, css, nothing,
3+
} from 'lit';
4+
import { style } from './CodeElement.css.js';
5+
import hljs from 'highlight.js/lib/core';
6+
import javascript from 'highlight.js/lib/languages/javascript';
7+
8+
/* register only certain languages */
9+
hljs.registerLanguage('javascript', javascript);
10+
11+
/**
12+
* CodeElement
13+
* This class is used to create a code block element, which
14+
* displays code according to the language specified.
15+
*
16+
* @example
17+
* <wc-code language="javascript">
18+
* console.log('Hello, World!');
19+
* </wc-code>
20+
*/
21+
export class CodeElement extends LitElement {
22+
static get localName() {
23+
return 'wc-code';
24+
}
25+
26+
constructor() {
27+
super();
28+
this.code = 'javascript';
29+
}
30+
31+
static get properties() {
32+
return {
33+
/**
34+
* The code language, for syntax highlighting.
35+
* @type {String}
36+
* @default javascript
37+
* @memberof CodeElement
38+
*/
39+
code: { type: String },
40+
};
41+
}
42+
43+
static get styles() {
44+
return [css`
45+
pre {
46+
white-space: pre-line;
47+
}
48+
`, style];
49+
}
50+
51+
get className() {
52+
const classes = [];
53+
if (this.code) {
54+
classes.push(this.code);
55+
}
56+
return classes.join(' ');
57+
}
58+
59+
render() {
60+
return html`
61+
<pre class=${this.className || nothing}></pre>
62+
`;
63+
}
64+
65+
firstUpdated() {
66+
this.shadowRoot.querySelector('pre').innerHTML = hljs.highlight(this.innerHTML, { language: this.code }).value;
67+
}
68+
}

‎src/layout/layout.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
// Web Components
3+
import { CodeElement } from './CodeElement';
4+
5+
// Web Components
6+
customElements.define(CodeElement.localName, CodeElement); // wc-code

0 commit comments

Comments
 (0)