Skip to content

Commit bec9e66

Browse files
chrisruegerchrisrueger
authored
Merge pull request bndtools#6766 from chrisrueger/docs-code-highlighter
docs: add syntax highlighter for code snippets
2 parents fda9509 + dae18d3 commit bec9e66

6 files changed

Lines changed: 209 additions & 2 deletions

File tree

‎docs/README.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,4 +109,27 @@ or to use a different `pagefind` version.
109109
### pagefind for production build via github actions
110110

111111
See the files `.github/workflows/cibuild.yml` and `.github/scripts/docs.sh` for how
112-
building the site and executing `pagefind` is done in the final build on github.
112+
building the site and executing `pagefind` is done in the final build on github.
113+
114+
115+
### CSS Styling for Code Highlighter
116+
117+
- jekyll uses `rouge` code highlighter
118+
- see `_config.yml` and section `syntax_highlighter_opts`
119+
- also see this website https://jekyll-themes.com/brazacz/rouge-themes for examples
120+
- rouge is compatible with and can use 'pygments' styles (see https://pygments.org/styles/)
121+
- these styles can be generated with the command
122+
123+
The following commands locally will help to generate the .css files for the pygment styles:
124+
125+
```
126+
gem install rouge
127+
# show a list of supported styles
128+
rougify help style
129+
# go to the css folder
130+
cd css
131+
# generate the css
132+
rougify style github.dark > github.dark.css
133+
```
134+
135+
Then reference the `.css` file in `_includes/head.htm `

‎docs/_config.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ plugins:
22
- jekyll-seo-tag
33
- jekyll-sitemap
44
markdown: kramdown
5+
highlighter: rouge
6+
kramdown:
7+
input: GFM
8+
syntax_highlighter_opts:
9+
default_lang: shell
10+
css_class : 'highlight' ## see https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers
511

612
collections:
713
chapters:

‎docs/_includes/footer.htm‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,41 @@
3232
header.appendChild(wrapper);
3333
});
3434
});
35+
36+
37+
// copy to clipboard buttons
38+
39+
const copyButtonLabel = "Copy";
40+
let blocks = document.querySelectorAll("pre.highlight");
41+
42+
blocks.forEach((block) => {
43+
// only add button if browser supports Clipboard API
44+
if (navigator.clipboard) {
45+
let button = document.createElement("button");
46+
button.classList.add("copycodebtn");
47+
48+
button.innerText = copyButtonLabel;
49+
block.appendChild(button);
50+
51+
button.addEventListener("click", async () => {
52+
await copyCode(block, button);
53+
});
54+
55+
}
56+
});
57+
58+
async function copyCode(block, button) {
59+
let code = block.querySelector("code");
60+
let text = code.innerText;
61+
62+
await navigator.clipboard.writeText(text);
63+
64+
button.innerText = "Copied";
65+
66+
setTimeout(()=> {
67+
button.innerText = copyButtonLabel;
68+
},2000)
69+
}
3570
</script>
3671

3772
</footer>

‎docs/_includes/head.htm‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
44
<meta name="viewport" content="width=device-width, initial-scale=1" />
55
<link href="{{ '/css/style.css' | prepend:site.baseurl }}" rel="stylesheet" />
6+
<link rel="stylesheet" href="/css/github.dark.css" />
67
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
78
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
89
<script src="/js/releases.js"></script>

‎docs/css/github.dark.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.highlight table td { padding: 5px; }
2+
.highlight table pre { margin: 0; }
3+
.highlight, .highlight .w {
4+
color: #c9d1d9;
5+
background-color: #161b22;
6+
}
7+
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
8+
color: #ff7b72;
9+
}
10+
.highlight .gr {
11+
color: #f0f6fc;
12+
}
13+
.highlight .gd {
14+
color: #ffdcd7;
15+
background-color: #67060c;
16+
}
17+
.highlight .nb {
18+
color: #ffa657;
19+
}
20+
.highlight .nc {
21+
color: #ffa657;
22+
}
23+
.highlight .no {
24+
color: #ffa657;
25+
}
26+
.highlight .nn {
27+
color: #ffa657;
28+
}
29+
.highlight .sr {
30+
color: #7ee787;
31+
}
32+
.highlight .na {
33+
color: #7ee787;
34+
}
35+
.highlight .nt {
36+
color: #7ee787;
37+
}
38+
.highlight .gi {
39+
color: #aff5b4;
40+
background-color: #033a16;
41+
}
42+
.highlight .ges {
43+
font-weight: bold;
44+
font-style: italic;
45+
}
46+
.highlight .kc {
47+
color: #79c0ff;
48+
}
49+
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
50+
color: #79c0ff;
51+
}
52+
.highlight .sb {
53+
color: #79c0ff;
54+
}
55+
.highlight .bp {
56+
color: #79c0ff;
57+
}
58+
.highlight .ne {
59+
color: #79c0ff;
60+
}
61+
.highlight .nl {
62+
color: #79c0ff;
63+
}
64+
.highlight .py {
65+
color: #79c0ff;
66+
}
67+
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
68+
color: #79c0ff;
69+
}
70+
.highlight .o, .highlight .ow {
71+
color: #79c0ff;
72+
}
73+
.highlight .gh {
74+
color: #1f6feb;
75+
font-weight: bold;
76+
}
77+
.highlight .gu {
78+
color: #1f6feb;
79+
font-weight: bold;
80+
}
81+
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
82+
color: #a5d6ff;
83+
}
84+
.highlight .nd {
85+
color: #d2a8ff;
86+
}
87+
.highlight .nf, .highlight .fm {
88+
color: #d2a8ff;
89+
}
90+
.highlight .err {
91+
color: #f0f6fc;
92+
background-color: #8e1519;
93+
}
94+
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
95+
color: #8b949e;
96+
}
97+
.highlight .gl {
98+
color: #8b949e;
99+
}
100+
.highlight .gt {
101+
color: #8b949e;
102+
}
103+
.highlight .ni {
104+
color: #c9d1d9;
105+
}
106+
.highlight .si {
107+
color: #c9d1d9;
108+
}
109+
.highlight .ge {
110+
color: #c9d1d9;
111+
font-style: italic;
112+
}
113+
.highlight .gs {
114+
color: #c9d1d9;
115+
font-weight: bold;
116+
}

‎docs/css/style.scss‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,4 +242,30 @@ h4:hover .header-link-wrapper {
242242
.next-prev a:focus {
243243
text-decoration: underline;
244244
color: #333;
245-
}
245+
}
246+
247+
248+
.highlight{
249+
padding: 5px;
250+
}
251+
252+
pre.highlight{
253+
border: none;
254+
}
255+
256+
code {
257+
all: revert !important;
258+
}
259+
260+
div[class*="language-"] {
261+
position: relative;
262+
margin: 5px 0 ;
263+
padding: 1.75rem 0 1.75rem 1rem;
264+
}
265+
266+
div[class*="language-"] button{
267+
position: absolute;
268+
top: 35px;
269+
right: 5px;
270+
}
271+

0 commit comments

Comments
 (0)