Skip to content

Commit a78a756

Browse files
jimangeljimangel
committed
fixing markdown codeblocks, maybe
1 parent 91d5171 commit a78a756

8 files changed

Lines changed: 141 additions & 227 deletions

File tree

‎README.md‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,52 @@ git submodule update --remote --merge
3434
caused me to delete:
3535

3636
```
37-
layouts/_default/single.html
38-
&
3937
layouts/partials/index_profile.html
4038
41-
cp themes/PaperMod/layouts/_default/single.html layouts/_default/single.html
4239
cp themes/PaperMod/layouts/partials/index_profile.html layouts/partials/index_profile.html
4340
```
4441

42+
Also had to redo highlighting:
43+
44+
```
45+
# diff head
46+
diff layouts/partials/head.html themes/PaperMod/layouts/partials/head.html
47+
48+
# copy and update
49+
cp themes/PaperMod/layouts/partials/head.html layouts/partials/head.html
50+
51+
# example edit
52+
<title>{{ if .IsHome }}Jim Angel | {{ else }}{{ if .Title }}{{ .Title }} | {{ end }}{{ end }}{{ ( replace site.Title "Jim Angel | " "") }}</title>
53+
```
54+
55+
Had to fix chroma (https://github.com/adityatelange/hugo-PaperMod/pull/1364):
56+
57+
```
58+
# clean up old way:
59+
git rm layouts/partials/css/syntax-dark.css layouts/partials/css/syntax-light.css
60+
61+
# manually removed a chunk from custom.css (for dark mode code).. might add back.
62+
# borland monokai
63+
hugo gen chromastyles --style=monokai > assets/css/includes/chroma-styles.css
64+
65+
# https://xyproto.github.io/splash/docs/all.html
66+
# adding lightmode / dark mode markdown (more info in layouts/partials/extend_head.html)
67+
# shout out https://bwiggs.com/posts/2021-08-03-hugo-syntax-highlight-dark-light/
68+
mkdir -p layouts/partials/css/
69+
# light others: monokailight / manni / colorful / github / lovelace / tango / xcode / vs / friendly
70+
hugo gen chromastyles --style=monokailight > layouts/partials/css/syntax-light.css
71+
# dark others: monokai / dracula / native / paraiso-dark / solarized-dark / solarized-dark256 / fruity
72+
hugo gen chromastyles --style=dracula | sed -n 's/.*\//body.dark/p' > layouts/partials/css/syntax-dark.css
73+
74+
# DON'T FORGET TO UPDATE custom.css with the bghljs color (to match theme of choice)
75+
# light (/* Background */ .bg { color: #272822; background-color: #fafafa; }
76+
cat layouts/partials/css/syntax-light.css | grep bg
77+
# dark (body.dark .bg { color: #f8f8f2; background-color: #272822; }
78+
cat layouts/partials/css/syntax-dark.css | grep bg
79+
80+
# lastly, check that the colors are set (if they exist, or unset if they dont with important! in the custom CSS). This is the final override for the custom theme. I don't think it will cause many issues.
81+
```
82+
4583
# Original setup
4684

4785
```

‎assets/css/extended/custom.css‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -34,41 +34,17 @@ pre {
3434
/* UPDATE: Make the code highlighted text match theme (defaults square) (cat layouts/partials/css/syntax-dark.css | grep bg) */
3535
code {
3636
border-radius: 4px !important;
37-
color: unset !important;
37+
/*color: unset !important;*/
3838
}
3939

40-
/* font color when dark (cat layouts/partials/css/syntax-dark.css | grep bg) */
41-
.dark code {
42-
color: #f8f8f2 !important;
40+
.chroma {
41+
background-color: unset !important;
4342
}
4443

44+
/*
4545
:root {
46-
--gap: 24px;
47-
--content-gap: 20px;
48-
--nav-width: 1024px;
49-
--main-width: 720px;
50-
--header-height: 60px;
51-
--footer-height: 60px;
52-
--radius: 8px;
53-
--theme: rgb(255, 255, 255);
54-
--entry: rgb(245, 245, 245); /* list / post background, defaults to 255, 255, 255 */
55-
--primary: rgb(30, 30, 30);
56-
--secondary: rgb(108, 108, 108);
57-
--tertiary: rgb(214, 214, 214);
58-
--content: rgb(31, 31, 31);
59-
--hljs-bg: #f0f3f3; /* (from STYLE in README) weirdly important as disabling highlighjs in the site doesn't appear to work... */
60-
--code-bg: #f0f3f3; /* I made a little darker because I can't get the notify feature to not be dark on my phone... (switch to style) This is used as the primary background color, defaults to 245, 245, 245 */
61-
--border: rgb(238, 238, 238);
46+
/ cat assets/css/includes/chroma-styles.css | grep bg /
47+
--code-block-bg: #282a36;
6248
}
6349
64-
.dark {
65-
--theme: rgb(29, 30, 32);
66-
--entry: rgb(46, 46, 51);
67-
--primary: rgb(218, 218, 219);
68-
--secondary: rgb(155, 156, 157);
69-
--tertiary: rgb(65, 66, 68);
70-
--content: rgb(196, 196, 197);
71-
--hljs-bg: #282a36; /* Note: It doesn't hurt to match code-bg and hljs...(from STYLE in README) weirdly important as disabling highlighjs in the site doesn't appear to work... */
72-
--code-bg: #282a36;
73-
--border: rgb(51, 51, 51);
74-
}
50+
*/

‎assets/css/includes/chroma-styles.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* Background */ .bg { color: #f8f8f2; background-color: #272822; }
2+
/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; }
3+
/* Other */ .chroma .x { }
4+
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
5+
/* CodeLine */ .chroma .cl { }
6+
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
7+
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
8+
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
9+
/* LineHighlight */ .chroma .hl { background-color: #3c3d38 }
10+
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
11+
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
12+
/* Line */ .chroma .line { display: flex; }
13+
/* Keyword */ .chroma .k { color: #66d9ef }
14+
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
15+
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
16+
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
17+
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
18+
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
19+
/* KeywordType */ .chroma .kt { color: #66d9ef }
20+
/* Name */ .chroma .n { }
21+
/* NameAttribute */ .chroma .na { color: #a6e22e }
22+
/* NameBuiltin */ .chroma .nb { }
23+
/* NameBuiltinPseudo */ .chroma .bp { }
24+
/* NameClass */ .chroma .nc { color: #a6e22e }
25+
/* NameConstant */ .chroma .no { color: #66d9ef }
26+
/* NameDecorator */ .chroma .nd { color: #a6e22e }
27+
/* NameEntity */ .chroma .ni { }
28+
/* NameException */ .chroma .ne { color: #a6e22e }
29+
/* NameFunction */ .chroma .nf { color: #a6e22e }
30+
/* NameFunctionMagic */ .chroma .fm { }
31+
/* NameLabel */ .chroma .nl { }
32+
/* NameNamespace */ .chroma .nn { }
33+
/* NameOther */ .chroma .nx { color: #a6e22e }
34+
/* NameProperty */ .chroma .py { }
35+
/* NameTag */ .chroma .nt { color: #f92672 }
36+
/* NameVariable */ .chroma .nv { }
37+
/* NameVariableClass */ .chroma .vc { }
38+
/* NameVariableGlobal */ .chroma .vg { }
39+
/* NameVariableInstance */ .chroma .vi { }
40+
/* NameVariableMagic */ .chroma .vm { }
41+
/* Literal */ .chroma .l { color: #ae81ff }
42+
/* LiteralDate */ .chroma .ld { color: #e6db74 }
43+
/* LiteralString */ .chroma .s { color: #e6db74 }
44+
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
45+
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
46+
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
47+
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
48+
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
49+
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
50+
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
51+
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
52+
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
53+
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
54+
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
55+
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
56+
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
57+
/* LiteralNumber */ .chroma .m { color: #ae81ff }
58+
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
59+
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
60+
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
61+
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
62+
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
63+
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
64+
/* Operator */ .chroma .o { color: #f92672 }
65+
/* OperatorWord */ .chroma .ow { color: #f92672 }
66+
/* Punctuation */ .chroma .p { }
67+
/* Comment */ .chroma .c { color: #75715e }
68+
/* CommentHashbang */ .chroma .ch { color: #75715e }
69+
/* CommentMultiline */ .chroma .cm { color: #75715e }
70+
/* CommentSingle */ .chroma .c1 { color: #75715e }
71+
/* CommentSpecial */ .chroma .cs { color: #75715e }
72+
/* CommentPreproc */ .chroma .cp { color: #75715e }
73+
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
74+
/* Generic */ .chroma .g { }
75+
/* GenericDeleted */ .chroma .gd { color: #f92672 }
76+
/* GenericEmph */ .chroma .ge { font-style: italic }
77+
/* GenericError */ .chroma .gr { }
78+
/* GenericHeading */ .chroma .gh { }
79+
/* GenericInserted */ .chroma .gi { color: #a6e22e }
80+
/* GenericOutput */ .chroma .go { }
81+
/* GenericPrompt */ .chroma .gp { }
82+
/* GenericStrong */ .chroma .gs { font-weight: bold }
83+
/* GenericSubheading */ .chroma .gu { color: #75715e }
84+
/* GenericTraceback */ .chroma .gt { }
85+
/* GenericUnderline */ .chroma .gl { }
86+
/* TextWhitespace */ .chroma .w { }

‎config.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ params:
125125
showtoc: false
126126
tocopen: false
127127
assets:
128+
# not needed anymore: https://github.com/adityatelange/hugo-PaperMod/pull/1364
128129
disableHLJS: true # to disable highlight.js
129130
disableFingerprinting: false # https://github.com/adityatelange/hugo-PaperMod/issues/89#issuecomment-736549907
130131
favicon: "/favicon.ico"
@@ -182,6 +183,7 @@ markup:
182183
guessSyntax: true
183184
lineNos: false
184185
noClasses: false
186+
style: dracula
185187

186188
privacy:
187189
vimeo:

‎layouts/partials/css/syntax-dark.css‎

Lines changed: 0 additions & 85 deletions
This file was deleted.

‎layouts/partials/css/syntax-light.css‎

Lines changed: 0 additions & 85 deletions
This file was deleted.

‎layouts/partials/extend_head.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
{{/* Inspired by https://bwiggs.com/posts/2021-08-03-hugo-syntax-highlight-dark-light/ but using a custom class (see readme) */}}
2-
<style type="text/css">
3-
{{ partial "css/syntax-dark.css" . | safeCSS }}
4-
{{ partial "css/syntax-light.css" . | safeCSS }}
5-
</style>
1+
{{/* Inspired by https://bwiggs.com/posts/2021-08-03-hugo-syntax-highlight-dark-light/ but using a custom class (see readme) */}}

0 commit comments

Comments
 (0)
⚡