Skip to content

Commit d263c4b

Browse files
chrisruegerchrisrueger
committed
improve code highlighting
- use github.light style - added README.md how to generate the styles - use 'shell' as default for code which makes most non-java code blocks look quite good (remove the default red) Signed-off-by: Christoph Rueger <[email protected]> - next step is to add 'java' to codeblocks where it is missing. java code looks much nicer with the github stylesheet
1 parent 2776eae commit d263c4b

File tree

5 files changed

+166
-0
lines changed

5 files changed

+166
-0
lines changed

‎README.md

+38
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,44 @@ This repository holds the bndtools.org website hosted at [https://bndtools.org][
55
This web site is maintained as markdown and turned into HTML by [Jekyll][jekyll]
66
using [GitHub Pages](https://help.github.com/articles/what-are-github-pages/).
77

8+
## Local development
9+
10+
- install ruby 2.7
11+
- call `./run.sh` on the commandline
12+
13+
This should install jekyll and start a local webserver at:
14+
15+
- http://127.0.0.1:4000/
16+
17+
Start editing markdown `.md` files. Jekyll will auto-detect changes and reload the website. Some changes require a restart (e.g. changes to `_config.yml`)
18+
19+
### CSS Styling for Code Highlighter
20+
21+
- jekyll uses `rouge` code highlighter
22+
- see `_config.yml` and section `syntax_highlighter_opts`
23+
- also see this website https://jekyll-themes.com/brazacz/rouge-themes for examples
24+
- rouge is compatible with and can use 'pygments' styles (see https://pygments.org/styles/)
25+
- these styles can be generated with the command
26+
27+
The following commands locally will help to generate the .css files for the pygment styles:
28+
29+
```
30+
gem install rouge
31+
32+
# show a list of supported styles
33+
rougify help style
34+
35+
# go to the css folder
36+
cd css
37+
38+
# generate the css
39+
rougify style monokai > monokai.css
40+
```
41+
42+
Then reference the `.css` file in `_includes/head.html `
43+
44+
45+
846
## Feedback
947

1048
Feedback is always welcome.

‎_config.yml

+7
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ plugins:
33
- jekyll-seo-tag
44
- jekyll-sitemap
55
markdown: kramdown
6+
highlighter: rouge
7+
kramdown:
8+
input: GFM
9+
syntax_highlighter_opts:
10+
default_lang: shell
11+
css_class : 'highlight' ## see https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers
12+
613

714
collections:
815
manual:

‎_includes/head.htm

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
{% if page.description %}<meta name="description" content="{{ page.description }}">{% endif %}
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="stylesheet" href="/css/style.css" />
7+
<link rel="stylesheet" href="/css/github.light.css" />
78
<link rel="shortcut icon" href="/images/favicon.ico">
89
<script src="/js/modernizr.js"></script>
910

‎css/github.light.css

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

‎css/style.scss

+8
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,12 @@ signature {
8383

8484
.nav-next {
8585
float: right;
86+
}
87+
88+
.highlight{
89+
padding: 5px;
90+
}
91+
92+
code {
93+
all: revert !important;
8694
}

0 commit comments

Comments
 (0)