From 69ef26c1ebcefe7b2f0c363728062954918d8416 Mon Sep 17 00:00:00 2001 From: parsiya Date: Sun, 2 Sep 2018 02:12:44 -0400 Subject: Move from CSS to built-in Chroma highlighter --- README.md | 36 +++++------------------ sample-config.toml | 10 ++++--- static/css/hugo-octopress.css | 66 +------------------------------------------ 3 files changed, 14 insertions(+), 98 deletions(-) diff --git a/README.md b/README.md index e0bd06b..054e9bf 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,6 @@ My personal website runs a modified version of the theme (mainly modified index) - [Shortcodes](#shortcodes) - [Code caption](#codecaption) - [Image caption](#imgcap) - - [Atom snippets for shortcodes](#snippets) - [Hugo page summary bug](#summary) - [License page](#licensepage) - [Table of contents](#tableofcontents) @@ -106,7 +105,7 @@ post = "/blog/:year-:month-:day-:title/" # Set to true to disable downloading of remote Google fonts disableGoogleFonts = false - # Remove or Set to false to use local fonts + # Remove or set to false to use local fonts remoteFonts = false # Remove or set to false to use FontAwesome CDN, otherwise the theme uses ForkAwesome local fonts. @@ -114,7 +113,7 @@ post = "/blog/:year-:month-:day-:title/" ``` ## Code highlight -The theme now supports the built-in Chroma highlighter. However, Chroma does not support the pygments `solarized dark` style. It's added to the CSS instead and must be enabled with `pygmentsuseclasses = true` in the config file. To use the Chroma highlighter, you need to disable Pygments with `pygmentsUseClassic=false`. +This theme use the built-in Chroma highlighter with the `solarized-dark` theme. To use the Chroma highlighter, you need to disable Pygments with `pygmentsUseClassic=false`. The following options control code highlighting: @@ -122,11 +121,12 @@ The following options control code highlighting: # Highlight shortcode and code fences (```) will be treated similarly pygmentscodefences = true -# Use CSS for highlighting -pygmentsuseclasses = true +# Change highlight style here. +# For a full list see: https://xyproto.github.io/splash/docs/all.html +pygmentsStyle = "solarized-dark" -# pygments options can be added here (and in the highlight shortcode in the markdown file) -# Hugo supports these pygments options: style, encoding, noclasses, hl_lines, linenos +# Other Chroma options can be added here (and in the highlight shortcode in the markdown file) +# See list of supported options: https://gohugo.io/content-management/syntax-highlighting/#options # for example: pygmentsoptions = "linenos=true" ``` @@ -316,28 +316,6 @@ Will result in: Sample caption ``` -#### Atom snippets for shortcodes -In order to read about creating Atom snippets please see [Atom's Snippets package](https://github.com/atom/snippets). - -Open your snippets file (`File > Open Your Snippets`) and paste the following: - -``` coffee -'.source.gfm': - 'codecaption': - 'prefix': 'codecap' - 'body': """ - {{< codecaption title="$1" lang="$2" >}} - $3 - {{< /codecaption >}} - """ - 'imgcap': - 'prefix': 'imgcap' - 'body': '{{< imgcap title="$1" src="/images/2016/$2" >}}' -``` - -My original mistake was to repeat `'.source.gfm'` before the `imgcap` snippet, seems like [cson keys should not be repeated](https://atom.io/docs/latest/using-atom-basic-customization#id-D9ATX). - -You can trigger the shortcodes by entering `imgcap` and `codecap` respectively and then pressing enter. You can change these keywords by modifying the `prefix` tag. After inserting the shortcode, the cursor will go to the first location which is designated by `$1`. After entering the first parameter you can go to `$2` and then `$3` using `tab`. ## Hugo page summary bug Hugo will use first 70 words of the post if it does not have a summary divider. The result is usually not pretty and contains raw HTML. To avoid this, always use the summary divider `` to designate summary. diff --git a/sample-config.toml b/sample-config.toml index 65088cb..9f01bdf 100644 --- a/sample-config.toml +++ b/sample-config.toml @@ -13,15 +13,17 @@ disqusShortname = "Your disqus shortname" paginate = 6 # Code highlighting options +# Hugo uses Chroma but names are the same as the old pygments highlighter # Highlight shortcode and code fences (```) will be treated similarly pygmentscodefences = true -# Use CSS for highlighting -pygmentsuseclasses = true +# Change highlight style here. +# For a full list see: https://xyproto.github.io/splash/docs/all.html +pygmentsStyle = "solarized-dark" -# pygments options can be added here (and in the highlight shortcode in the markdown file) -# Hugo supports these pygments options: style, encoding, noclasses, hl_lines, linenos +# Other Chroma options can be added here (and in the highlight shortcode in the markdown file) +# See list of supported options: https://gohugo.io/content-management/syntax-highlighting/#options # for example: pygmentsoptions = "linenos=true" [permalinks] diff --git a/static/css/hugo-octopress.css b/static/css/hugo-octopress.css index 8e5b895..b46f05b 100755 --- a/static/css/hugo-octopress.css +++ b/static/css/hugo-octopress.css @@ -1927,68 +1927,4 @@ figure a { white-space: nowrap; } -/* Hugo Figure shortcode - end */ - -/* Chroma - start */ - -/* Background */ .chroma { color: #93a1a1; background-color: #002b36; tab-size: 4; } -/* Other */ .chroma .x { color: #cb4b16 } -/* 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; display: block; } -/* LineHighlight */ .chroma .hl { display: block; width: 100%; } -/* LineNumbersTable */ .chroma .lnt { margin-right: 0.3em; padding: 0 0.3em 0 0.3em; } -/* LineNumbers */ .chroma .ln { margin-right: 0.3em; padding: 0 0.3em 0 0.3em; } -/* Keyword */ .chroma .k { color: #719e07 } -/* KeywordConstant */ .chroma .kc { color: #cb4b16 } -/* KeywordDeclaration */ .chroma .kd { color: #268bd2 } -/* KeywordNamespace */ .chroma .kn { color: #719e07 } -/* KeywordPseudo */ .chroma .kp { color: #719e07 } -/* KeywordReserved */ .chroma .kr { color: #268bd2 } -/* KeywordType */ .chroma .kt { color: #dc322f } -/* NameBuiltin */ .chroma .nb { color: #b58900 } -/* NameBuiltinPseudo */ .chroma .bp { color: #268bd2 } -/* NameClass */ .chroma .nc { color: #268bd2 } -/* NameConstant */ .chroma .no { color: #cb4b16 } -/* NameDecorator */ .chroma .nd { color: #268bd2 } -/* NameEntity */ .chroma .ni { color: #cb4b16 } -/* NameException */ .chroma .ne { color: #cb4b16 } -/* NameFunction */ .chroma .nf { color: #268bd2 } -/* NameTag */ .chroma .nt { color: #268bd2 } -/* NameVariable */ .chroma .nv { color: #268bd2 } -/* LiteralString */ .chroma .s { color: #2aa198 } -/* LiteralStringAffix */ .chroma .sa { color: #2aa198 } -/* LiteralStringBacktick */ .chroma .sb { color: #586e75 } -/* LiteralStringChar */ .chroma .sc { color: #2aa198 } -/* LiteralStringDelimiter */ .chroma .dl { color: #2aa198 } -/* LiteralStringDouble */ .chroma .s2 { color: #2aa198 } -/* LiteralStringEscape */ .chroma .se { color: #cb4b16 } -/* LiteralStringInterpol */ .chroma .si { color: #2aa198 } -/* LiteralStringOther */ .chroma .sx { color: #2aa198 } -/* LiteralStringRegex */ .chroma .sr { color: #dc322f } -/* LiteralStringSingle */ .chroma .s1 { color: #2aa198 } -/* LiteralStringSymbol */ .chroma .ss { color: #2aa198 } -/* LiteralNumber */ .chroma .m { color: #2aa198 } -/* LiteralNumberBin */ .chroma .mb { color: #2aa198 } -/* LiteralNumberFloat */ .chroma .mf { color: #2aa198 } -/* LiteralNumberHex */ .chroma .mh { color: #2aa198 } -/* LiteralNumberInteger */ .chroma .mi { color: #2aa198 } -/* LiteralNumberIntegerLong */ .chroma .il { color: #2aa198 } -/* LiteralNumberOct */ .chroma .mo { color: #2aa198 } -/* Operator */ .chroma .o { color: #719e07 } -/* OperatorWord */ .chroma .ow { color: #719e07 } -/* Comment */ .chroma .c { color: #586e75 } -/* CommentHashbang */ .chroma .ch { color: #586e75 } -/* CommentMultiline */ .chroma .cm { color: #586e75 } -/* CommentSingle */ .chroma .c1 { color: #586e75 } -/* CommentSpecial */ .chroma .cs { color: #719e07 } -/* CommentPreproc */ .chroma .cp { color: #719e07 } -/* CommentPreprocFile */ .chroma .cpf { color: #719e07 } -/* GenericDeleted */ .chroma .gd { color: #dc322f } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { color: #dc322f; font-weight: bold } -/* GenericHeading */ .chroma .gh { color: #cb4b16 } -/* GenericInserted */ .chroma .gi { color: #719e07 } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #268bd2 } - -/* Chroma - end */ \ No newline at end of file +/* Hugo Figure shortcode - end */ \ No newline at end of file -- cgit v1.2.3