adam/home73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improving code styling

Browse source
This commit is contained in:
Adam Piontek 2021-04-06 13:48:29 -04:00
parent c508c20e86
commit 7a3c532b86
6 changed files with 74 additions and 17675 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -10,20 +10,9 @@ Posts are markdown files stored under `priv/content` and parsed by [Earmark](htt
For the challenge of it, and to keep user's browsers from having to run javascript just to highlight some code, I chose to do server-side syntax highlighting. For the challenge of it, and to keep user's browsers from having to run javascript just to highlight some code, I chose to do server-side syntax highlighting.
Due to the lexer limitations of elixir-native solutions, the highlighter uses [Pygments](https://pygments.org/) by calling [pygmentize](https://pygments.org/docs/cmdline/) via [System.cmd](https://hexdocs.pm/elixir/System.html#cmd/3) Due to the lexer limitations of elixir-native solutions, the highlighter uses [Chroma](https://github.com/alecthomas/chroma) by calling its command-linie-interface via [System.cmd](https://hexdocs.pm/elixir/System.html#cmd/3)
However, this requires installing python3 & Pygments. Best way to do this is with a venv (virtual python environment), so you'll also want `python3-venv` installed on a debian system, for example. However, this requires installing [golang](https://golang.org/doc/install) as well as chroma. You can add go to your path, but once chroma is installed, just make sure Home73k's `config.exs` is configured to point directly to the chroma binary under `config :home73k, :app_global_vars, chroma_bin: "path/to/bin/chroma"` -- `"priv/go/bin/chroma"` by default.
By default, Home73k is configured to look for pygmentize in a venv at `priv/pygments/bin/pygmentize` -- here's a quick howto for how to set that up:
```shell
cd priv
python3 -m venv pygments
source pygments/bin/activate
pip3 install Pygments
```
The location of bin/pygmentize can be configured in `config.exs` under `config :home73k, :app_global_vars, pygmentize_bin: "path/to/bin/pygmentize"`
## Deploying ## Deploying

121
assets/css/_chroma.css
View file

@ -1,60 +1,65 @@
/* Background */ .chroma { color: #8a8a8a; background-color: #1c1c1c } /* Background */ .chroma { color: #e2e4e5; background-color: #282a36 }
/* Other */ .chroma .x { color: #d75f00 } /* Error */ .chroma .err { color: #ff5c57 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #323232 } /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #3d3f4a }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #454545 } /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #454545 } /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Keyword */ .chroma .k { color: #5f8700 } /* Keyword */ .chroma .k { color: #ff6ac1 }
/* KeywordConstant */ .chroma .kc { color: #d75f00 } /* KeywordConstant */ .chroma .kc { color: #ff6ac1 }
/* KeywordDeclaration */ .chroma .kd { color: #0087ff } /* KeywordDeclaration */ .chroma .kd { color: #ff5c57 }
/* KeywordNamespace */ .chroma .kn { color: #d75f00 } /* KeywordNamespace */ .chroma .kn { color: #ff6ac1 }
/* KeywordPseudo */ .chroma .kp { color: #5f8700 } /* KeywordPseudo */ .chroma .kp { color: #ff6ac1 }
/* KeywordReserved */ .chroma .kr { color: #0087ff } /* KeywordReserved */ .chroma .kr { color: #ff6ac1 }
/* KeywordType */ .chroma .kt { color: #af0000 } /* KeywordType */ .chroma .kt { color: #9aedfe }
/* NameBuiltin */ .chroma .nb { color: #0087ff } /* NameAttribute */ .chroma .na { color: #57c7ff }
/* NameBuiltinPseudo */ .chroma .bp { color: #0087ff } /* NameBuiltin */ .chroma .nb { color: #ff5c57 }
/* NameClass */ .chroma .nc { color: #0087ff } /* NameClass */ .chroma .nc { color: #f3f99d }
/* NameConstant */ .chroma .no { color: #d75f00 } /* NameConstant */ .chroma .no { color: #ff9f43 }
/* NameDecorator */ .chroma .nd { color: #0087ff } /* NameDecorator */ .chroma .nd { color: #ff9f43 }
/* NameEntity */ .chroma .ni { color: #d75f00 } /* NameFunction */ .chroma .nf { color: #57c7ff }
/* NameException */ .chroma .ne { color: #af8700 } /* NameLabel */ .chroma .nl { color: #ff5c57 }
/* NameFunction */ .chroma .nf { color: #0087ff } /* NameTag */ .chroma .nt { color: #ff6ac1 }
/* NameTag */ .chroma .nt { color: #0087ff } /* NameVariable */ .chroma .nv { color: #ff5c57 }
/* NameVariable */ .chroma .nv { color: #0087ff } /* NameVariableClass */ .chroma .vc { color: #ff5c57 }
/* LiteralString */ .chroma .s { color: #00afaf } /* NameVariableGlobal */ .chroma .vg { color: #ff5c57 }
/* LiteralStringAffix */ .chroma .sa { color: #00afaf } /* NameVariableInstance */ .chroma .vi { color: #ff5c57 }
/* LiteralStringBacktick */ .chroma .sb { color: #4e4e4e } /* LiteralString */ .chroma .s { color: #5af78e }
/* LiteralStringChar */ .chroma .sc { color: #00afaf } /* LiteralStringAffix */ .chroma .sa { color: #5af78e }
/* LiteralStringDelimiter */ .chroma .dl { color: #00afaf } /* LiteralStringBacktick */ .chroma .sb { color: #5af78e }
/* LiteralStringDoc */ .chroma .sd { color: #00afaf } /* LiteralStringChar */ .chroma .sc { color: #5af78e }
/* LiteralStringDouble */ .chroma .s2 { color: #00afaf } /* LiteralStringDelimiter */ .chroma .dl { color: #5af78e }
/* LiteralStringEscape */ .chroma .se { color: #af0000 } /* LiteralStringDoc */ .chroma .sd { color: #5af78e }
/* LiteralStringHeredoc */ .chroma .sh { color: #00afaf } /* LiteralStringDouble */ .chroma .s2 { color: #5af78e }
/* LiteralStringInterpol */ .chroma .si { color: #00afaf } /* LiteralStringEscape */ .chroma .se { color: #5af78e }
/* LiteralStringOther */ .chroma .sx { color: #00afaf } /* LiteralStringHeredoc */ .chroma .sh { color: #5af78e }
/* LiteralStringRegex */ .chroma .sr { color: #af0000 } /* LiteralStringInterpol */ .chroma .si { color: #5af78e }
/* LiteralStringSingle */ .chroma .s1 { color: #00afaf } /* LiteralStringOther */ .chroma .sx { color: #5af78e }
/* LiteralStringSymbol */ .chroma .ss { color: #00afaf } /* LiteralStringRegex */ .chroma .sr { color: #5af78e }
/* LiteralNumber */ .chroma .m { color: #00afaf } /* LiteralStringSingle */ .chroma .s1 { color: #5af78e }
/* LiteralNumberBin */ .chroma .mb { color: #00afaf } /* LiteralStringSymbol */ .chroma .ss { color: #5af78e }
/* LiteralNumberFloat */ .chroma .mf { color: #00afaf } /* LiteralNumber */ .chroma .m { color: #ff9f43 }
/* LiteralNumberHex */ .chroma .mh { color: #00afaf } /* LiteralNumberBin */ .chroma .mb { color: #ff9f43 }
/* LiteralNumberInteger */ .chroma .mi { color: #00afaf } /* LiteralNumberFloat */ .chroma .mf { color: #ff9f43 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #00afaf } /* LiteralNumberHex */ .chroma .mh { color: #ff9f43 }
/* LiteralNumberOct */ .chroma .mo { color: #00afaf } /* LiteralNumberInteger */ .chroma .mi { color: #ff9f43 }
/* OperatorWord */ .chroma .ow { color: #5f8700 } /* LiteralNumberIntegerLong */ .chroma .il { color: #ff9f43 }
/* Comment */ .chroma .c { color: #4e4e4e } /* LiteralNumberOct */ .chroma .mo { color: #ff9f43 }
/* CommentHashbang */ .chroma .ch { color: #4e4e4e } /* Operator */ .chroma .o { color: #ff6ac1 }
/* CommentMultiline */ .chroma .cm { color: #4e4e4e } /* OperatorWord */ .chroma .ow { color: #ff6ac1 }
/* CommentSingle */ .chroma .c1 { color: #4e4e4e } /* Comment */ .chroma .c { color: #78787e }
/* CommentSpecial */ .chroma .cs { color: #5f8700 } /* CommentHashbang */ .chroma .ch { color: #78787e }
/* CommentPreproc */ .chroma .cp { color: #5f8700 } /* CommentMultiline */ .chroma .cm { color: #78787e }
/* CommentPreprocFile */ .chroma .cpf { color: #5f8700 } /* CommentSingle */ .chroma .c1 { color: #78787e }
/* GenericDeleted */ .chroma .gd { color: #af0000 } /* CommentSpecial */ .chroma .cs { color: #78787e }
/* GenericEmph */ .chroma .ge { font-style: italic } /* CommentPreproc */ .chroma .cp { color: #78787e }
/* GenericError */ .chroma .gr { color: #af0000; font-weight: bold } /* CommentPreprocFile */ .chroma .cpf { color: #78787e }
/* GenericHeading */ .chroma .gh { color: #d75f00 } /* GenericDeleted */ .chroma .gd { color: #ff5c57 }
/* GenericInserted */ .chroma .gi { color: #5f8700 } /* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericStrong */ .chroma .gs { font-weight: bold } /* GenericError */ .chroma .gr { color: #ff5c57 }
/* GenericSubheading */ .chroma .gu { color: #0087ff } /* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { font-weight: bold }
/* GenericOutput */ .chroma .go { color: #43454f }
/* GenericStrong */ .chroma .gs { font-style: italic }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }

8
assets/css/app.scss
View file

@ -27,11 +27,15 @@
pre.chroma { pre.chroma {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: .5em; border-radius: .5em;
color: $gray-300; background-color: #1c1c1c;
// color: $gray-300;
// span.c1 {
// color: $gray-600;
// }
} }
code.inline { code.inline {
background-color: #1c1c1c; background-color: #1c1c1c;
color: $gray-300; color: #e2e4e5;
padding: .1em .25em; padding: .1em .25em;
border-radius: .25em; border-radius: .25em;
display: inline; display: inline;

17598
assets/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
lib/home73k/highlighter.ex
View file

@ -6,7 +6,6 @@ defmodule Home73k.Highlighter do
alias Home73k.Temp alias Home73k.Temp
@chroma_bin Home73k.app_chroma_bin() |> Path.expand() @chroma_bin Home73k.app_chroma_bin() |> Path.expand()
@style "solarized-dark256"
@doc """ @doc """
Highlights all code block in an already generated HTML document. Highlights all code block in an already generated HTML document.
@ -25,7 +24,7 @@ defmodule Home73k.Highlighter do
File.write!(tmp_file, unescaped_code) File.write!(tmp_file, unescaped_code)
# use chroma to highlight the code via temp file # use chroma to highlight the code via temp file
bin_args = ["-l", lang, "-f", "html", "-s", @style, "--html-only", "--html-prevent-surrounding-pre", tmp_file] bin_args = ["-l", lang, "-f", "html", "--html-only", "--html-prevent-surrounding-pre", tmp_file]
{highlighted, _} = System.cmd(@chroma_bin, bin_args) {highlighted, _} = System.cmd(@chroma_bin, bin_args)
# return properly wrapped highlighted code # return properly wrapped highlighted code

4
priv/content/2021/04/2021-04-05_blog-incorporated.md
View file

@ -35,7 +35,7 @@ end
Following that change, new markdown files are recognized and included as expected. Following that change, new markdown files are recognized and included as expected.
And, FWIW, here's the meat of my modified highlighter using chroma (NOTE: the CSS styles were exported separately (like so: `~/go/bin/chroma -s base16-snazzy --html-styles > _chroma.css`) and are included in my app.scss file. And since I use purgecss, I had to add the chroma class to the safelist for the webpack plugin: `safelist: {greedy: [/phx/, /topbar/, /inline/, /chroma/]}` .) And, FWIW, here's the meat of my modified highlighter using chroma (NOTE: the CSS styles can be exported separately (like so: `~/go/bin/chroma -s base16-snazzy --html-styles > _chroma.css`), or you can use styles from Pygments, including custom styles like [nord_pygments](https://github.com/sbrisard/nord_pygments)). Once included in your app.scss, if you use purgecss like me, you'll need to add the chroma class (or whatever class you're using) to the safelist for the webpack plugin: `safelist: {greedy: [/phx/, /topbar/, /inline/, /chroma/]}` .)
```elixir ```elixir
def highlight_code_blocks(html) do def highlight_code_blocks(html) do
@ -52,7 +52,7 @@ defp highlight_code_block(_full_block, lang, code) do
File.write!(tmp_file, unescaped_code) File.write!(tmp_file, unescaped_code)
# use chroma to highlight the code via temp file # use chroma to highlight the code via temp file
bin_args = ["-l", lang, "-f", "html", "-s", @style, "--html-only", "--html-prevent-surrounding-pre", tmp_file] bin_args = ["-l", lang, "-f", "html", "--html-only", "--html-prevent-surrounding-pre", tmp_file]
# The '@chroma_bin' module attribute retrieves the configured # The '@chroma_bin' module attribute retrieves the configured
# location of the chroma cli binary from the application config. # location of the chroma cli binary from the application config.
{highlighted, _} = System.cmd(@chroma_bin, bin_args) {highlighted, _} = System.cmd(@chroma_bin, bin_args)