From 762533ab9925634f9164b7794926793b15526627 Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Fri, 22 Jan 2021 00:24:16 +0530
Subject: [PATCH] add FAQ for Using Hugo's Syntax highlighter "chroma"

---
 FAQs.md         | 38 ++++++++++++++++++++++++++++++++++++++
 Installation.md |  9 +++++++++
 2 files changed, 47 insertions(+)

diff --git a/FAQs.md b/FAQs.md
index 9746268..e0c7e0c 100644
--- a/FAQs.md
+++ b/FAQs.md
@@ -9,6 +9,7 @@
 -   [Pin a Post](#pin-a-post)
 -   [Adding Custom Favicon(s)](#adding-custom-favicons)
 -   [Centering image in markdown](#centering-image-in-markdown)
+-   [Using Hugo's Syntax highlighter "chroma"](#using-hugos-syntax-highlighter-chroma)
 -   [References](#references)
 
 ---
@@ -271,6 +272,43 @@ Add `#center` after image to center align an image
 
 ---
 
+## Using Hugo's Syntax highlighter "chroma"
+
+1. Disable Highlight.js in site `config.yml`
+
+```yml
+params:
+    assets:
+        disableHLJS: true
+```
+
+2. Set hugo's markdown styling in site `config.yml`
+
+```yml
+markup:
+    highlight:
+        # anchorLineNos: true
+        codeFences: true
+        guessSyntax: true
+        lineNos: true
+        # noClasses: false
+        style: monokai
+```
+
+3. If you want `lineNos: true`, the background won't be proper.
+
+Add the following to `assets/css/extended/custom.css`
+
+```css
+.chroma {
+    background-color: unset;
+}
+```
+
+More Info : [Configure Markup - Highlight](https://gohugo.io/getting-started/configuration-markup#highlight)
+
+---
+
 ## References
 
 -   [Override a Hugo theme](https://zwbetz.com/override-a-hugo-theme/)
diff --git a/Installation.md b/Installation.md
index f591adb..0b04899 100644
--- a/Installation.md
+++ b/Installation.md
@@ -191,6 +191,15 @@ menu:
           name: example.org
           url: https://example.org
           weight: 30
+# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
+# markup:
+#     highlight:
+#         # anchorLineNos: true
+#         codeFences: true
+#         guessSyntax: true
+#         lineNos: true
+#         # noClasses: false
+#         style: monokai
 ```
 
 ---