feat(syntax): add support for highlighting lines in code snippets

fix #520

Author: talha131

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

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);

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;
-} 
+}