From ba2de8ccf971b1e77abe24960532f664e00ef9d9 Mon Sep 17 00:00:00 2001
From: Talha Mansoor <talha131@gmail.com>
Date: Sun, 2 Feb 2020 20:33:33 +0500
Subject: [PATCH] feat(syntax): add support for highlighting lines in code
 snippets

fix #520
---
 .../Components/code-style-highlight-lines.md  | 39 +++++++++++++++++++
 static/css/code.css                           |  6 +++
 static/css/pygments.css                       |  7 ++--
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 documentation/content/Components/code-style-highlight-lines.md

diff --git a/documentation/content/Components/code-style-highlight-lines.md b/documentation/content/Components/code-style-highlight-lines.md
new file mode 100644
index 00000000..09a21bb1
--- /dev/null
+++ b/documentation/content/Components/code-style-highlight-lines.md
@@ -0,0 +1,39 @@
+---
+Title: Code Snippets -- Highlight Lines
+Tags: markdown, code-snippets, gist
+Date: 2020-02-02 20:12
+comments: false
+Slug: code-snippets-highlight-lines
+authors: Talha Mansoor
+Category: Components
+---
+
+[Python-Markdown](https://github.com/Python-Markdown/markdown/) uses
+[CodeHilite](https://python-markdown.github.io/extensions/code_hilite/) <!-- yaspeller ignore -->
+extension for syntax highlighting. 
+
+This extension lets you highlight specific lines in your code snippets. You can read the instructions [here](https://python-markdown.github.io/extensions/code_hilite/#colons).
+
+Elegant supports this feature.
+
+    :::python hl_lines="1 3"
+    # This line is emphasized
+    # This line isn't
+    # This line is emphasized
+
+Another example,
+
+    :::html hl_lines="2"
+    <div
+      class="photoswipe-gallery"
+      itemscope
+      itemtype="http://schema.org/ImageGallery"
+    >
+    </div>
+
+Another example,
+
+    #!python hl_lines="2"
+    # Code goes here ..
+    # This line is emphasized
+    # This line isn't
diff --git a/static/css/code.css b/static/css/code.css
index b891ac6e..902f5245 100644
--- a/static/css/code.css
+++ b/static/css/code.css
@@ -1,3 +1,9 @@
+/* For highlighting lines in code snippets */
+.highlight span.hll span {
+  background-color: black;
+  display: inline-block;
+  width: 100%;
+}
 div.highlight {
   margin-bottom: 20px;
   border-radius: var(--borderRadius);
diff --git a/static/css/pygments.css b/static/css/pygments.css
index 7685233a..3f276691 100644
--- a/static/css/pygments.css
+++ b/static/css/pygments.css
@@ -1,5 +1,6 @@
 .highlight .hll {
-  background-color: #ffffcc;
+  /* This line results in highlighting whitespaces -- Talha */
+  /* background-color: #ffffcc; */
 }
 .highlight {
   background: #282828;
@@ -301,8 +302,8 @@
   color: #d3869b;
   background-color: #282828;
 } /* Literal.Number.Integer.Long */
-/* My fixes */
+/* My fixes -- Talha*/
 .highlight .cpf {
   color: #b8bb26;
   background-color: #282828;
-} 
+}