Skip to content

Commit 6a0fa85

Browse files
LoggyLoggy
committed
code highlight
1 parent c52bbae commit 6a0fa85

File tree

4 files changed

+169
-17
lines changed

4 files changed

+169
-17
lines changed

‎webapp/javascript/components/TagsBar.jsx

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Menu, SubMenu, MenuItem, MenuButton } from "@szhsin/react-menu";
55

66
import { fetchTags, fetchTagValues, updateTags } from "../redux/actions";
77
import history from "../util/history";
8+
import "../util/prism";
89

910
function TagsBar({
1011
tags,
@@ -14,7 +15,9 @@ function TagsBar({
1415
tagValuesLoading,
1516
labels,
1617
}) {
17-
const [tagsValue, setTagsValue] = useState("{}");
18+
const [tagsValue, setTagsValue] = useState(
19+
new URL(window.location.href).searchParams.get("query")
20+
);
1821

1922
const loadTagValues = (tag) => {
2023
if (tags[tag] && !tags[tag].length && tagValuesLoading !== tag) {
@@ -27,14 +30,14 @@ function TagsBar({
2730
setTagsValue(
2831
tagsValue.replace(
2932
"}",
30-
`${tagsValue === "{}" ? "" : ","}${tag}=${tagValue}}`
33+
`${tagsValue === "{}" ? "" : ","}${tag}="${tagValue}"}`
3134
)
3235
);
3336
} else {
3437
const tagPairs = tagsValue.replace(/[{}]/g, "").split(",");
3538
tagPairs.forEach((pair, i) => {
3639
if (pair.startsWith(tag)) {
37-
tagPairs[i] = `${tag}=${tagValue}`;
40+
tagPairs[i] = `${tag}="${tagValue}"`;
3841
}
3942
});
4043
setTagsValue(`{${tagPairs.join(",")}}`);
@@ -47,32 +50,34 @@ function TagsBar({
4750

4851
useEffect(() => {
4952
const url = new URL(window.location.href);
50-
const tagsParams = [];
53+
// const tagsParams = [];
5154
Object.keys(tags).forEach((tag) => {
52-
if (url.search.includes(tag)) {
55+
if (url.searchParams.get("query").includes(tag)) {
5356
loadTagValues(tag);
54-
tagsParams.push(`${tag}=${url.searchParams.get(tag)}`);
57+
// tagsParams.push(`${tag}="${url.searchParams.get(tag)}"`);
5558
}
5659
});
57-
setTagsValue(`{${tagsParams.join(",")}}`);
60+
// setTagsValue(`{${tagsParams.join(",")}}`);
5861
}, [tags]);
5962

6063
useEffect(() => {
61-
const tagPairs = tagsValue.replace(/[{}]/g, "").split(",");
64+
const tagPairs = tagsValue.replace(/[{}"]/g, "").split(",");
6265
const url = new URL(window.location.href);
6366
const tagsUpdater = [];
6467
tagPairs.forEach((pair) => {
6568
const [name, value] = pair.split("=");
66-
if (value) {
67-
url.searchParams.set(name, value);
69+
if (name && value) {
6870
tagsUpdater.push({ name, value });
69-
} else {
70-
url.searchParams.delete(name);
7171
}
7272
});
73+
url.searchParams.set("query", tagsValue);
7374
history.push(url.search);
7475
updateTags(tagsUpdater);
75-
console.log(tagsUpdater);
76+
if (window.Prism) {
77+
window.Prism.highlightElement(
78+
document.getElementById("highlighting-content")
79+
);
80+
}
7681
}, [tagsValue]);
7782

7883
return (
@@ -101,7 +106,9 @@ function TagsBar({
101106
key={tagValue}
102107
value={tagValue}
103108
onClick={(e) => onTagsValueChange(tag, e.value)}
104-
className={tagsValue.includes(tagValue) ? "active" : ""}
109+
className={
110+
tagsValue.includes(`${tag}="${tagValue}"`) ? "active" : ""
111+
}
105112
>
106113
{tagValue}
107114
</MenuItem>
@@ -114,8 +121,8 @@ function TagsBar({
114121
<span className="tags-app-name">
115122
{labels && labels.find((label) => label.name === "__name__").value}
116123
</span>
117-
<pre className="tags-highlighted highlight-promql" aria-hidden="true">
118-
<code className="language-html" id="highlighting-content">
124+
<pre className="tags-highlighted language-promql" aria-hidden="true">
125+
<code className="language-promql" id="highlighting-content">
119126
{tagsValue}
120127
</code>
121128
</pre>

‎webapp/javascript/util/prism.js

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

‎webapp/sass/components/tagsbar.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "../variables" as *;
22

33
@import "../../node_modules/@szhsin/react-menu/dist/index.css";
4+
@import "../prism.scss";
45

56
.tags-bar {
67
display: flex;
@@ -79,14 +80,22 @@
7980
.tags-highlighted{
8081
height: 0;
8182
width: 0;
82-
margin-top: -12px;
83+
margin-top: -17px;
8384
margin-right: -7px;
8485
z-index: 1;
8586
margin-left: 5px;
8687
pointer-events: none;
88+
overflow: inherit;
89+
background: none;
90+
padding: 0;
8791
code {
8892
font-size: 16px;
8993
font-family: arial;
94+
background: none;
95+
border: none;
96+
box-shadow: none;
97+
padding: 0;
98+
margin: 0;
9099
}
91100
}
92101
}

‎webapp/sass/prism.scss

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/* PrismJS 1.24.1
2+
https://prismjs.com/download.html#themes=prism-funky&languages=promql */
3+
/**
4+
* prism.js Funky theme
5+
* Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
6+
* @author Lea Verou
7+
*/
8+
9+
code[class*="language-"],
10+
pre[class*="language-"] {
11+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
12+
font-size: 1em;
13+
text-align: left;
14+
white-space: pre;
15+
word-spacing: normal;
16+
word-break: normal;
17+
word-wrap: normal;
18+
line-height: 1.5;
19+
20+
-moz-tab-size: 4;
21+
-o-tab-size: 4;
22+
tab-size: 4;
23+
24+
-webkit-hyphens: none;
25+
-moz-hyphens: none;
26+
-ms-hyphens: none;
27+
hyphens: none;
28+
}
29+
30+
/* Code blocks */
31+
pre[class*="language-"] {
32+
padding: .4em .8em;
33+
margin: .5em 0;
34+
overflow: auto;
35+
background-size: 1em 1em;
36+
}
37+
38+
code[class*="language-"] {
39+
background: black;
40+
color: white;
41+
box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
42+
}
43+
44+
/* Inline code */
45+
:not(pre) > code[class*="language-"] {
46+
padding: .2em;
47+
border-radius: .3em;
48+
box-shadow: none;
49+
white-space: normal;
50+
}
51+
52+
.token.comment,
53+
.token.prolog,
54+
.token.doctype,
55+
.token.cdata {
56+
color: #aaa;
57+
}
58+
59+
.token.punctuation {
60+
color: #999;
61+
}
62+
63+
.token.namespace {
64+
opacity: .7;
65+
}
66+
67+
.token.property,
68+
.token.tag,
69+
.token.boolean,
70+
.token.number,
71+
.token.constant,
72+
.token.symbol {
73+
color: #0cf;
74+
}
75+
76+
.token.selector,
77+
.token.attr-name,
78+
.token.string,
79+
.token.char,
80+
.token.builtin {
81+
color: #33a2e5;
82+
}
83+
84+
.token.operator,
85+
.token.entity,
86+
.token.url,
87+
.language-css .token.string,
88+
.token.variable,
89+
.token.inserted {
90+
color: yellowgreen;
91+
}
92+
93+
.token.atrule,
94+
.token.attr-value,
95+
.token.keyword {
96+
color: #74e680;
97+
}
98+
99+
.token.regex,
100+
.token.important {
101+
color: orange;
102+
}
103+
104+
.token.important,
105+
.token.bold {
106+
font-weight: bold;
107+
}
108+
.token.italic {
109+
font-style: italic;
110+
}
111+
112+
.token.entity {
113+
cursor: help;
114+
}
115+
116+
.token.deleted {
117+
color: red;
118+
}
119+
120+
/* Plugin styles: Diff Highlight */
121+
pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
122+
pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
123+
background-color: rgba(255, 0, 0, .3);
124+
display: inline;
125+
}
126+
127+
pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
128+
pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
129+
background-color: rgba(0, 255, 128, .3);
130+
display: inline;
131+
}
132+

0 commit comments

Comments
 (0)