Skip to content

Commit 7ff7347

Browse files
javier-godoymlopezFC
javier-godoy
authored and
mlopezFC
committed
feat: replace code highlighter with PrismJS
1 parent 1b485c2 commit 7ff7347

File tree

4 files changed

+962
-27
lines changed

4 files changed

+962
-27
lines changed

‎src/main/java/com/flowingcode/vaadin/addons/demo/SourceCodeView.java‎

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,41 +19,24 @@
1919
*/
2020
package com.flowingcode.vaadin.addons.demo;
2121

22-
import com.vaadin.flow.component.AttachEvent;
23-
import com.vaadin.flow.component.Component;
2422
import com.vaadin.flow.component.HasSize;
25-
import com.vaadin.flow.component.Tag;
2623
import com.vaadin.flow.component.dependency.JsModule;
27-
import com.vaadin.flow.component.dependency.NpmPackage;
2824
import com.vaadin.flow.component.html.Div;
25+
import com.vaadin.flow.dom.Element;
2926

3027
@SuppressWarnings("serial")
31-
@NpmPackage(value = "polymer-code-highlighter", version = "1.0.5")
32-
@JsModule("polymer-code-highlighter/code-highlighter.js")
28+
@JsModule("./code-viewer.ts")
3329
class SourceCodeView extends Div implements HasSize {
3430

35-
private String sourceUrl;
36-
3731
public SourceCodeView(String sourceUrl) {
38-
this.sourceUrl = translateSource(sourceUrl);
39-
}
40-
41-
@Override
42-
protected void onAttach(AttachEvent attachEvent) {
43-
super.onAttach(attachEvent);
44-
45-
getElement().executeJs(
46-
"var self=this;"
47-
+ "var xhr = new XMLHttpRequest();"
48-
+ "xhr.onreadystatechange = function() {"
49-
+ "if (this.readyState == 4 && this.status == 200) {"
50-
+ " var elem = document.createElement('code-highlighter');"
51-
+ " elem.setAttribute('lang','java');"
52-
+ " elem.innerHTML = this.responseText;"
53-
+ " self.appendChild(elem);"
54-
+ "}};"
55-
+ "xhr.open('GET', $0, true);"
56-
+ "xhr.send();", sourceUrl);
32+
String url = translateSource(sourceUrl);
33+
Element codeViewer = new Element("code-viewer");
34+
getElement().appendChild(codeViewer);
35+
getElement().getStyle().set("display", "flex");
36+
codeViewer.getStyle().set("flex-grow", "1");
37+
addAttachListener(ev -> {
38+
codeViewer.executeJs("this.fetchContents($0,$1)", url, "java");
39+
});
5740
}
5841

5942
private static String translateSource(String url) {

‎src/main/resources/META-INF/resources/frontend/code-viewer.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import "@vaadin/vaadin-tabs";
2+
import {
3+
customElement,
4+
html,
5+
LitElement,
6+
property,
7+
unsafeCSS,
8+
} from "lit-element";
9+
import { unsafeHTML } from "lit-html/directives/unsafe-html";
10+
//@ts-ignore
11+
import * as Prism from "./prism.js";
12+
import prismCss from "./prism.css";
13+
14+
@customElement("code-viewer")
15+
export class CodeViewer extends LitElement {
16+
17+
@property({ type: String })
18+
contents = "";
19+
20+
@property({ type: String })
21+
language = "none";
22+
23+
createRenderRoot() {
24+
return this;
25+
}
26+
27+
render() {
28+
return html`
29+
<style>
30+
code-viewer {
31+
display: block;
32+
background-color: #272822;
33+
font-size: 10pt;
34+
}
35+
36+
${unsafeCSS(prismCss)}
37+
38+
pre[class*="language-"] {
39+
background: inherit;
40+
}
41+
</style>
42+
43+
${/*Don't reuse these elements. This is needed because Prism
44+
removes the markers lit-html uses to track slots */
45+
unsafeHTML(
46+
`<pre><code class="language-${this.language}">${this.escapeHtml(
47+
this.contents
48+
)}
49+
</code></pre>`
50+
)}
51+
`;
52+
}
53+
54+
async fetchContents(sourceUrl: string, language: string) {
55+
var self=this;
56+
var xhr = new XMLHttpRequest();
57+
xhr.onreadystatechange = async function() {
58+
if (this.readyState == 4 && this.status == 200) {
59+
self.contents = this.responseText;
60+
self.language = language;
61+
// Wait for LitElement to finish updating the DOM before higlighting
62+
await self.updateComplete;
63+
64+
//@ts-ignore
65+
Prism.highlightAllUnder(self);
66+
}};
67+
xhr.open('GET', sourceUrl, true);
68+
xhr.send();
69+
}
70+
71+
hh() {
72+
Prism.highlightAllUnder(this);
73+
}
74+
75+
escapeHtml(unsafe: string) {
76+
return unsafe
77+
.replace(/&/g, "&amp;")
78+
.replace(/</g, "&lt;")
79+
.replace(/>/g, "&gt;")
80+
.replace(/"/g, "&quot;")
81+
.replace(/'/g, "&#039;");
82+
}
83+
84+
}

‎src/main/resources/META-INF/resources/frontend/prism.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* PrismJS 1.20.0
2+
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+java+typescript */
3+
/**
4+
* okaidia theme for JavaScript, CSS and HTML
5+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
6+
* @author ocodia
7+
*/
8+
9+
code[class*="language-"],
10+
pre[class*="language-"] {
11+
color: #f8f8f2;
12+
background: none;
13+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
14+
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
15+
font-size: 1em;
16+
text-align: left;
17+
white-space: pre;
18+
word-spacing: normal;
19+
word-break: normal;
20+
word-wrap: normal;
21+
line-height: 1.5;
22+
23+
-moz-tab-size: 4;
24+
-o-tab-size: 4;
25+
tab-size: 4;
26+
27+
-webkit-hyphens: none;
28+
-moz-hyphens: none;
29+
-ms-hyphens: none;
30+
hyphens: none;
31+
}
32+
33+
/* Code blocks */
34+
pre[class*="language-"] {
35+
padding: 1em;
36+
margin: 0.5em 0;
37+
overflow: auto;
38+
border-radius: 0.3em;
39+
}
40+
41+
:not(pre) > code[class*="language-"],
42+
pre[class*="language-"] {
43+
background: #272822;
44+
}
45+
46+
/* Inline code */
47+
:not(pre) > code[class*="language-"] {
48+
padding: 0.1em;
49+
border-radius: 0.3em;
50+
white-space: normal;
51+
}
52+
53+
.token.comment,
54+
.token.prolog,
55+
.token.doctype,
56+
.token.cdata {
57+
color: #8292a2;
58+
}
59+
60+
.token.punctuation {
61+
color: #f8f8f2;
62+
}
63+
64+
.token.namespace {
65+
opacity: 0.7;
66+
}
67+
68+
.token.property,
69+
.token.tag,
70+
.token.constant,
71+
.token.symbol,
72+
.token.deleted {
73+
color: #f92672;
74+
}
75+
76+
.token.boolean,
77+
.token.number {
78+
color: #ae81ff;
79+
}
80+
81+
.token.selector,
82+
.token.attr-name,
83+
.token.string,
84+
.token.char,
85+
.token.builtin,
86+
.token.inserted {
87+
color: #a6e22e;
88+
}
89+
90+
.token.operator,
91+
.token.entity,
92+
.token.url,
93+
.language-css .token.string,
94+
.style .token.string,
95+
.token.variable {
96+
color: #f8f8f2;
97+
}
98+
99+
.token.atrule,
100+
.token.attr-value,
101+
.token.function,
102+
.token.class-name {
103+
color: #e6db74;
104+
}
105+
106+
.token.keyword {
107+
color: #66d9ef;
108+
}
109+
110+
.token.regex,
111+
.token.important {
112+
color: #fd971f;
113+
}
114+
115+
.token.important,
116+
.token.bold {
117+
font-weight: bold;
118+
}
119+
.token.italic {
120+
font-style: italic;
121+
}
122+
123+
.token.entity {
124+
cursor: help;
125+
}

0 commit comments

Comments
 (0)