sjs/samhuri.net
1
0
Fork 0
mirror of https://github.com/samsonjs/samhuri.net.git synced 2026-03-25 09:05:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

WIP: syntax highlighting with rouge

Browse source
This commit is contained in:
Sami Samhuri 2025-11-23 19:45:10 -08:00
parent 0ff4069443
commit 5068de962d
No known key found for this signature in database
7 changed files with 122 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pressa/Gemfile.lock
View file

@ -69,7 +69,6 @@ GEM
guard (~> 2.1)
guard-compat (~> 1.1)
rspec (>= 2.99.0, < 4.0)
htmlbeautifier (1.4.3)
ice_nine (0.11.2)
io-console (0.8.1)
json (2.16.0)
@ -204,7 +203,6 @@ DEPENDENCIES
dry-struct (~> 1.8)
guard (~> 2.18)
guard-rspec (~> 4.7)
htmlbeautifier (~> 1.4)
kramdown (~> 2.5)
kramdown-parser-gfm (~> 1.1)
nokogiri (~> 1.18)

2
pressa/SYNTAX_HIGHLIGHTING.md
View file

@ -114,7 +114,7 @@ Kramdown::Document.new(
syntax_highlighter: 'rouge',
syntax_highlighter_opts: {
line_numbers: false, # Change to true if you want line numbers
wrap: false # Change to true for <div> wrapping
wrap: true # Leave true so Rouge emits <pre><code> blocks
}
).to_html
```

2
pressa/lib/posts/repo.rb
View file

@ -62,7 +62,7 @@ module Pressa
syntax_highlighter: 'rouge',
syntax_highlighter_opts: {
line_numbers: false,
wrap: false
wrap: true
}
).to_html
end

1
pressa/lib/pressa.rb
View file

@ -53,6 +53,7 @@ module Pressa
styles: [
Stylesheet.new(href: 'css/normalize.css'),
Stylesheet.new(href: 'css/style.css'),
Stylesheet.new(href: 'css/syntax.css'),
Stylesheet.new(href: 'css/fontawesome.min.css'),
Stylesheet.new(href: 'css/brands.min.css'),
Stylesheet.new(href: 'css/solid.min.css')

3
pressa/lib/utils/html_formatter.rb
View file

@ -9,7 +9,8 @@ module Pressa
PLACEHOLDER_PREFIX = '%%PRESSA_PRESERVE_'
PRESERVE_PATTERNS = [
/<div class="typocode">.*?<\/div>/m,
/<div class="pressa">.*?<\/div>/m
/<div class="pressa">.*?<\/div>/m,
/<div class="language-[^"]*?highlighter-rouge">.*?<\/div>\s*<\/div>/m
].freeze
def self.format(html)

2
pressa/lib/utils/markdown_renderer.rb
View file

@ -78,7 +78,7 @@ module Pressa
syntax_highlighter: 'rouge',
syntax_highlighter_opts: {
line_numbers: false,
wrap: false
wrap: true
}
).to_html
end

116
public/css/syntax.css Normal file
View file

@ -0,0 +1,116 @@
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
color: #c9d1d9;
background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
color: #ff7b72;
}
.highlight .gr {
color: #f0f6fc;
}
.highlight .gd {
color: #ffdcd7;
background-color: #67060c;
}
.highlight .nb {
color: #ffa657;
}
.highlight .nc {
color: #ffa657;
}
.highlight .no {
color: #ffa657;
}
.highlight .nn {
color: #ffa657;
}
.highlight .sr {
color: #7ee787;
}
.highlight .na {
color: #7ee787;
}
.highlight .nt {
color: #7ee787;
}
.highlight .gi {
color: #aff5b4;
background-color: #033a16;
}
.highlight .ges {
font-weight: bold;
font-style: italic;
}
.highlight .kc {
color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
color: #79c0ff;
}
.highlight .sb {
color: #79c0ff;
}
.highlight .bp {
color: #79c0ff;
}
.highlight .ne {
color: #79c0ff;
}
.highlight .nl {
color: #79c0ff;
}
.highlight .py {
color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
color: #79c0ff;
}
.highlight .o, .highlight .ow {
color: #79c0ff;
}
.highlight .gh {
color: #1f6feb;
font-weight: bold;
}
.highlight .gu {
color: #1f6feb;
font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
color: #a5d6ff;
}
.highlight .nd {
color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
color: #d2a8ff;
}
.highlight .err {
color: #f0f6fc;
background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
color: #8b949e;
}
.highlight .gl {
color: #8b949e;
}
.highlight .gt {
color: #8b949e;
}
.highlight .ni {
color: #c9d1d9;
}
.highlight .si {
color: #c9d1d9;
}
.highlight .ge {
color: #c9d1d9;
font-style: italic;
}
.highlight .gs {
color: #c9d1d9;
font-weight: bold;
}