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

updated to use golang chroma instead of python pygments

Browse source
This commit is contained in:
Adam Piontek 2021-04-06 10:42:15 -04:00
parent 3bdfb5148b
commit a8e0b5d45d
9 changed files with 85 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -41,6 +41,8 @@ npm-debug.log
# Ignore the pygments venv directory # Ignore the pygments venv directory
/priv/pygments/ /priv/pygments/
# Ignore chroma bin directory
/priv/chroma/
# dev # dev
TODO.md TODO.md

60
assets/css/_chroma.css Normal file
View file

@ -0,0 +1,60 @@
/* Background */ .chroma { color: #8a8a8a; background-color: #1c1c1c }
/* Other */ .chroma .x { color: #d75f00 }
/* 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; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #323232 }
/* LineNumbersTable */ .chroma .lnt { 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: #454545 }
/* Keyword */ .chroma .k { color: #5f8700 }
/* KeywordConstant */ .chroma .kc { color: #d75f00 }
/* KeywordDeclaration */ .chroma .kd { color: #0087ff }
/* KeywordNamespace */ .chroma .kn { color: #d75f00 }
/* KeywordPseudo */ .chroma .kp { color: #5f8700 }
/* KeywordReserved */ .chroma .kr { color: #0087ff }
/* KeywordType */ .chroma .kt { color: #af0000 }
/* NameBuiltin */ .chroma .nb { color: #0087ff }
/* NameBuiltinPseudo */ .chroma .bp { color: #0087ff }
/* NameClass */ .chroma .nc { color: #0087ff }
/* NameConstant */ .chroma .no { color: #d75f00 }
/* NameDecorator */ .chroma .nd { color: #0087ff }
/* NameEntity */ .chroma .ni { color: #d75f00 }
/* NameException */ .chroma .ne { color: #af8700 }
/* NameFunction */ .chroma .nf { color: #0087ff }
/* NameTag */ .chroma .nt { color: #0087ff }
/* NameVariable */ .chroma .nv { color: #0087ff }
/* LiteralString */ .chroma .s { color: #00afaf }
/* LiteralStringAffix */ .chroma .sa { color: #00afaf }
/* LiteralStringBacktick */ .chroma .sb { color: #4e4e4e }
/* LiteralStringChar */ .chroma .sc { color: #00afaf }
/* LiteralStringDelimiter */ .chroma .dl { color: #00afaf }
/* LiteralStringDoc */ .chroma .sd { color: #00afaf }
/* LiteralStringDouble */ .chroma .s2 { color: #00afaf }
/* LiteralStringEscape */ .chroma .se { color: #af0000 }
/* LiteralStringHeredoc */ .chroma .sh { color: #00afaf }
/* LiteralStringInterpol */ .chroma .si { color: #00afaf }
/* LiteralStringOther */ .chroma .sx { color: #00afaf }
/* LiteralStringRegex */ .chroma .sr { color: #af0000 }
/* LiteralStringSingle */ .chroma .s1 { color: #00afaf }
/* LiteralStringSymbol */ .chroma .ss { color: #00afaf }
/* LiteralNumber */ .chroma .m { color: #00afaf }
/* LiteralNumberBin */ .chroma .mb { color: #00afaf }
/* LiteralNumberFloat */ .chroma .mf { color: #00afaf }
/* LiteralNumberHex */ .chroma .mh { color: #00afaf }
/* LiteralNumberInteger */ .chroma .mi { color: #00afaf }
/* LiteralNumberIntegerLong */ .chroma .il { color: #00afaf }
/* LiteralNumberOct */ .chroma .mo { color: #00afaf }
/* OperatorWord */ .chroma .ow { color: #5f8700 }
/* Comment */ .chroma .c { color: #4e4e4e }
/* CommentHashbang */ .chroma .ch { color: #4e4e4e }
/* CommentMultiline */ .chroma .cm { color: #4e4e4e }
/* CommentSingle */ .chroma .c1 { color: #4e4e4e }
/* CommentSpecial */ .chroma .cs { color: #5f8700 }
/* CommentPreproc */ .chroma .cp { color: #5f8700 }
/* CommentPreprocFile */ .chroma .cpf { color: #5f8700 }
/* GenericDeleted */ .chroma .gd { color: #af0000 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #af0000; font-weight: bold }
/* GenericHeading */ .chroma .gh { color: #d75f00 }
/* GenericInserted */ .chroma .gi { color: #5f8700 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #0087ff }

269
assets/css/_pygments.css
View file

@ -1,269 +0,0 @@
pre {
line-height: 125%;
}
td.linenos .normal {
color: #37474f;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
span.linenos {
color: #37474f;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
td.linenos .special {
color: #607a86;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
span.linenos.special {
color: #607a86;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
pre.pygments .hll {
background-color: #2c3b41;
}
pre.pygments {
background: #263238;
color: #eeffff;
}
pre.pygments .c {
color: #546e7a;
font-style: italic;
} /* Comment */
pre.pygments .err {
color: #ff5370;
} /* Error */
pre.pygments .esc {
color: #89ddff;
} /* Escape */
pre.pygments .g {
color: #eeffff;
} /* Generic */
pre.pygments .k {
color: #bb80b3;
} /* Keyword */
pre.pygments .l {
color: #c3e88d;
} /* Literal */
pre.pygments .n {
color: #eeffff;
} /* Name */
pre.pygments .o {
color: #89ddff;
} /* Operator */
pre.pygments .p {
color: #89ddff;
} /* Punctuation */
pre.pygments .ch {
color: #546e7a;
font-style: italic;
} /* Comment.Hashbang */
pre.pygments .cm {
color: #546e7a;
font-style: italic;
} /* Comment.Multiline */
pre.pygments .cp {
color: #546e7a;
font-style: italic;
} /* Comment.Preproc */
pre.pygments .cpf {
color: #546e7a;
font-style: italic;
} /* Comment.PreprocFile */
pre.pygments .c1 {
color: #546e7a;
font-style: italic;
} /* Comment.Single */
pre.pygments .cs {
color: #546e7a;
font-style: italic;
} /* Comment.Special */
pre.pygments .gd {
color: #ff5370;
} /* Generic.Deleted */
pre.pygments .ge {
color: #89ddff;
} /* Generic.Emph */
pre.pygments .gr {
color: #ff5370;
} /* Generic.Error */
pre.pygments .gh {
color: #c3e88d;
} /* Generic.Heading */
pre.pygments .gi {
color: #c3e88d;
} /* Generic.Inserted */
pre.pygments .go {
color: #546e7a;
} /* Generic.Output */
pre.pygments .gp {
color: #ffcb6b;
} /* Generic.Prompt */
pre.pygments .gs {
color: #ff5370;
} /* Generic.Strong */
pre.pygments .gu {
color: #89ddff;
} /* Generic.Subheading */
pre.pygments .gt {
color: #ff5370;
} /* Generic.Traceback */
pre.pygments .kc {
color: #89ddff;
} /* Keyword.Constant */
pre.pygments .kd {
color: #bb80b3;
} /* Keyword.Declaration */
pre.pygments .kn {
color: #89ddff;
font-style: italic;
} /* Keyword.Namespace */
pre.pygments .kp {
color: #89ddff;
} /* Keyword.Pseudo */
pre.pygments .kr {
color: #bb80b3;
} /* Keyword.Reserved */
pre.pygments .kt {
color: #bb80b3;
} /* Keyword.Type */
pre.pygments .ld {
color: #c3e88d;
} /* Literal.Date */
pre.pygments .m {
color: #f78c6c;
} /* Literal.Number */
pre.pygments .s {
color: #c3e88d;
} /* Literal.String */
pre.pygments .na {
color: #bb80b3;
} /* Name.Attribute */
pre.pygments .nb {
color: #82aaff;
} /* Name.Builtin */
pre.pygments .nc {
color: #ffcb6b;
} /* Name.Class */
pre.pygments .no {
color: #eeffff;
} /* Name.Constant */
pre.pygments .nd {
color: #82aaff;
} /* Name.Decorator */
pre.pygments .ni {
color: #89ddff;
} /* Name.Entity */
pre.pygments .ne {
color: #ffcb6b;
} /* Name.Exception */
pre.pygments .nf {
color: #82aaff;
} /* Name.Function */
pre.pygments .nl {
color: #82aaff;
} /* Name.Label */
pre.pygments .nn {
color: #ffcb6b;
} /* Name.Namespace */
pre.pygments .nx {
color: #eeffff;
} /* Name.Other */
pre.pygments .py {
color: #ffcb6b;
} /* Name.Property */
pre.pygments .nt {
color: #ff5370;
} /* Name.Tag */
pre.pygments .nv {
color: #89ddff;
} /* Name.Variable */
pre.pygments .ow {
color: #89ddff;
font-style: italic;
} /* Operator.Word */
pre.pygments .w {
color: #eeffff;
} /* Text.Whitespace */
pre.pygments .mb {
color: #f78c6c;
} /* Literal.Number.Bin */
pre.pygments .mf {
color: #f78c6c;
} /* Literal.Number.Float */
pre.pygments .mh {
color: #f78c6c;
} /* Literal.Number.Hex */
pre.pygments .mi {
color: #f78c6c;
} /* Literal.Number.Integer */
pre.pygments .mo {
color: #f78c6c;
} /* Literal.Number.Oct */
pre.pygments .sa {
color: #bb80b3;
} /* Literal.String.Affix */
pre.pygments .sb {
color: #c3e88d;
} /* Literal.String.Backtick */
pre.pygments .sc {
color: #c3e88d;
} /* Literal.String.Char */
pre.pygments .dl {
color: #eeffff;
} /* Literal.String.Delimiter */
pre.pygments .sd {
color: #546e7a;
font-style: italic;
} /* Literal.String.Doc */
pre.pygments .s2 {
color: #c3e88d;
} /* Literal.String.Double */
pre.pygments .se {
color: #eeffff;
} /* Literal.String.Escape */
pre.pygments .sh {
color: #c3e88d;
} /* Literal.String.Heredoc */
pre.pygments .si {
color: #89ddff;
} /* Literal.String.Interpol */
pre.pygments .sx {
color: #c3e88d;
} /* Literal.String.Other */
pre.pygments .sr {
color: #89ddff;
} /* Literal.String.Regex */
pre.pygments .s1 {
color: #c3e88d;
} /* Literal.String.Single */
pre.pygments .ss {
color: #89ddff;
} /* Literal.String.Symbol */
pre.pygments .bp {
color: #89ddff;
} /* Name.Builtin.Pseudo */
pre.pygments .fm {
color: #82aaff;
} /* Name.Function.Magic */
pre.pygments .vc {
color: #89ddff;
} /* Name.Variable.Class */
pre.pygments .vg {
color: #89ddff;
} /* Name.Variable.Global */
pre.pygments .vi {
color: #89ddff;
} /* Name.Variable.Instance */
pre.pygments .vm {
color: #82aaff;
} /* Name.Variable.Magic */
pre.pygments .il {
color: #f78c6c;
} /* Literal.Number.Integer.Long */

19
assets/css/app.scss
View file

@ -16,24 +16,21 @@
/* Navbar custom styling */ /* Navbar custom styling */
@import "nav-bar-help"; @import "nav-bar-help";
/* Pygments syntax highlighting styles */ /* Chroma syntax highlighting styles */
@import "pygments"; @import "chroma";
/* code highlighting */ /* code highlighting */
pre.pygments { pre.chroma {
line-height: 125%; line-height: 1.5;
background-color: #272822 !important; padding: 0.75rem 1rem;
overflow: wrap !important; border-radius: .5em;
padding: 0.75rem;
border-radius: .25em;
code { code {
font-family: $font-family-code; font-family: $font-family-code;
color: #eeffff;
} }
} }
code.inline { code.inline {
background-color: #272822; background-color: #1c1c1c;
color: #eeffff; color: #8a8a8a;
padding: .2em .5em; padding: .2em .5em;
border-radius: .25em; border-radius: .25em;
display: inline; display: inline;

3
assets/js/app.js
View file

@ -43,9 +43,6 @@ import { Socket } from "phoenix";
import topbar from "topbar"; import topbar from "topbar";
import { LiveSocket } from "phoenix_live_view"; import { LiveSocket } from "phoenix_live_view";
// // Prismjs import
// import Prism from "prismjs"
// // Bootstrap v5 js imports // // Bootstrap v5 js imports
// import "bootstrap/js/dist/alert"; // import "bootstrap/js/dist/alert";
import "bootstrap/js/dist/collapse"; import "bootstrap/js/dist/collapse";

2
assets/webpack.config.js
View file

@ -93,7 +93,7 @@ module.exports = (env, options) => {
"../**/live/**/*.ex", "../**/live/**/*.ex",
"./js/**/*.js", "./js/**/*.js",
]), ]),
safelist: [/phx/, /topbar/, /linenos/, /pygments/], safelist: [/phx/, /topbar/, /chroma/],
}), }),
] ]
), ),

2
config/config.exs
View file

@ -14,7 +14,7 @@ config :elixir, :time_zone_database, Tzdata.TimeZoneDatabase
config :home73k, :app_global_vars, config :home73k, :app_global_vars,
time_zone: "America/New_York", time_zone: "America/New_York",
blog_content: "priv/content", blog_content: "priv/content",
pygmentize_bin: "priv/pygments/bin/pygmentize" chroma_bin: "priv/chroma/chroma"
# Configures the endpoint # Configures the endpoint
config :home73k, Home73kWeb.Endpoint, config :home73k, Home73kWeb.Endpoint,

8
lib/home73k.ex
View file

@ -7,10 +7,14 @@ defmodule Home73k do
if it comes from the database, an external API or others. if it comes from the database, an external API or others.
""" """
@app_vars Application.compile_env(:home73k, :app_global_vars, time_zone: "America/New_York") @app_vars Application.compile_env(:home73k, :app_global_vars, [
time_zone: "America/New_York",
blog_content: "priv/content",
chroma_bin: "priv/chroma/chroma"
])
def app_vars, do: @app_vars def app_vars, do: @app_vars
def app_time_zone, do: @app_vars[:time_zone] def app_time_zone, do: @app_vars[:time_zone]
def app_blog_content, do: @app_vars[:blog_content] def app_blog_content, do: @app_vars[:blog_content]
def app_pygmentize_bin, do: @app_vars[:pygmentize_bin] def app_chroma_bin, do: @app_vars[:chroma_bin]
end end

16
lib/home73k/highlighter.ex
View file

@ -5,7 +5,8 @@ defmodule Home73k.Highlighter do
alias Home73k.Temp alias Home73k.Temp
@pygments_cmd Home73k.app_pygmentize_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.
@ -23,15 +24,12 @@ defmodule Home73k.Highlighter do
tmp_file = Temp.file() tmp_file = Temp.file()
File.write!(tmp_file, unescaped_code) File.write!(tmp_file, unescaped_code)
# pygmentize the code via temp file # use chroma to highlight the code via temp file
pyg_args = ["-l", lang, "-f", "html", "-O", "cssclass=pygments", tmp_file] bin_args = ["-l", lang, "-f", "html", "-s", @style, "--html-only", "--html-prevent-surrounding-pre", tmp_file]
{highlighted, _} = System.cmd(@pygments_cmd, pyg_args) {highlighted, _} = System.cmd(@chroma_bin, bin_args)
# correct pygment wrapping markup # return properly wrapped highlighted code
highlighted ~s(<pre class="chroma"><code class="language-#{lang}">#{highlighted}</code></pre>)
|> String.replace("<span></span>", "")
|> String.replace("<div class=\"pygments\"><pre>", "<pre class=\"pygments\"><code class=\"language-#{lang}\">")
|> String.replace("</pre></div>", "</code></pre>")
end end
entities = [{"&amp;", ?&}, {"&lt;", ?<}, {"&gt;", ?>}, {"&quot;", ?"}, {"&#39;", ?'}] entities = [{"&amp;", ?&}, {"&lt;", ?<}, {"&gt;", ?>}, {"&quot;", ?"}, {"&#39;", ?'}]