Browse Source

feat(highlighting): add syntax highlighting

now you can higlight your code snippets using syntax highlighting provided by pygments using the
lovely one dark and one light themes from the hackable atom editor. see README for setup and usage
instructions.
Josh Habdas 2 years ago
parent
commit
a038ee0db9
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 20 additions and 0 deletions
  1. 20
    0
      README.md

+ 20
- 0
README.md View File

@@ -23,6 +23,7 @@ Head to [Hack Cabin](https://hackcabin.com) for a **production example** running
23 23
 - Post comments with [Disqus](https://disqus.com/)
24 24
 - Reading time and post summaries set user expectations
25 25
 - [Modification Dating](#modification-dating) adds visibility to fresh content
26
+- [Syntax Highlighting](#code-highlighting) with optional line numbers and ability to call attention to individual lines
26 27
 - Configurable post bylines including category and tag taxonomy listings, author and word count
27 28
 - Simple list pagination with page indicator
28 29
 - Site verification with Google, Bing, Alexa and Yandex
@@ -352,6 +353,25 @@ To create your own custom shortcodes add a `layouts/shortcodes` directory to you
352 353
 
353 354
 Reference the Hugo docs for [shortcode usage instructions](https://gohugo.io/extras/shortcodes#using-a-shortcode).
354 355
 
356
+### Syntax Highlighting
357
+
358
+Provide a richer experience when sharing code snippets on your site. After Dark provides support for code highlighting using the lovely [One Dark](https://github.com/atom/one-dark-syntax) or [One Light](https://github.com/atom/one-light-syntax) syntax themes used in [Atom](https://github.com/atom/atom).
359
+
360
+**Why not use Highlight.js?** Because it's slow, doesn't support line numbers or highlighting of individual lines. In addition, JS-based solutions force browsers to do the same work over and over again when that work can be done once at site generation.
361
+
362
+To set-up syntax highlighting for your After Dark site:
363
+
364
+- Follow Hugo's [Pygments installation](https://gohugo.io/extras/highlighting/#pygments) instructions.
365
+- Open the `themes/after-dark` folder and run `npm i`
366
+- Then open `./node_modules/atom-one-pygments` and `npm i`
367
+- Once dependencies are instaled, issue `npm run build` to generate the stylesheets to the `./dist` directory
368
+
369
+Then choose either `./dist/light.css` or `dark.css` depending on your [Theme Variant](#theme-variants), and copy the contents of the file into your [Custom CSS](#custom-css) file.
370
+
371
+Once configured, syntax highlighting can be achieved using the Hugo built-in [`highlight` shortcode](https://gohugo.io/extras/shortcodes#highlight).
372
+
373
+Reference Hugo's Syntax Highlighting docs for [additional usage instructions](https://gohugo.io/extras/highlighting/#usage).
374
+
355 375
 ### Custom CSS
356 376
 
357 377
 To add your own theme css or override existing CSS without having to change theme files do the following:

Loading…
Cancel
Save