Fix code highlighting

_config.yml

@@ -77,9 +77,19 @@ news_limit: 5
 # Jekyll settings
 # -----------------------------------------------------------------------------
 
-# Build settings
+# Markdown and syntax highlight
 markdown: kramdown
 highlighter: rouge
+highlight_theme: github  # https://github.com/jwarby/jekyll-pygments-themes
+kramdown:
+  input: GFM
+  syntax_highlighter_opts:
+    css_class: 'highlight'
+    span:
+      line_numbers: false
+    block:
+      line_numbers: true
+      start_line: 1
 
 # Includes & excludes
 include: ['_pages']
@@ -124,7 +134,6 @@ scholar:
 # -----------------------------------------------------------------------------
 
 enable_google_analytics:  false
-enable_highlight:         false
 enable_katex:             true
 enable_mansory:           false
 enable_progressbar:       false

_includes/hemline.html

@@ -8,11 +8,7 @@
 <script src="{{ '/assets/js/common.js' | prepend: site.baseurl | prepend: site.url }}"></script>
 
 <!-- Code Syntax Highlighting -->
-{% if site.enable_highlight %}
+<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
-<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ site.highlight_version }}/highlight.min.js" integrity="sha256-1zu+3BnLYV9LdiY85uXMzii3bdrkelyp37e0ZyTAQh0=" crossorigin="anonymous"></script>
-<script>hljs.initHighlightingOnLoad();</script>
-{% endif %}
 
 {% if site.enable_katex %}
 <!-- Load KaTeX -->

_posts/2015-07-15-code.markdown

@@ -4,15 +4,19 @@ title: a post with code
 date: 2015-07-15 15:09:00
 description: an example of a blog post with some code
 ---
-This theme implements a built-in Jekyll feature, the use of Pygments, for sytanx highlighting. It supports more than 100 languages. This example is in C++. All you have to do is wrap your code in a liquid tag:
+This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting.
+It supports more than 100 languages.
+This example is in C++.
+All you have to do is wrap your code in a liquid tag:
 
 {% raw  %}
-{% highlight c++ %}  <br/> code code code <br/> {% endhighlight %}
+{% highlight c++ linenos %}  <br/> code code code <br/> {% endhighlight %}
 {% endraw %}
 
+The keyword `linenos` triggers display of line numbers.
 Produces something like this:
 
-{% highlight c++ %}
+{% highlight c++ linenos %}
 
 int main(int argc, char const \*argv[])
 {

_sass/_base.scss

@@ -16,6 +16,12 @@ a, table.table a {
   }
 }
 
+// Math
+.equation {
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
 
 // Profile
 

_sass/_syntax-highlighting.scss

@@ -1,106 +0,0 @@
-pre, code {
-    font-family: 'Source Code Pro', monospace;
-    font-weight: normal;
-    font-size: 13px;
-    line-height: 1.3em;
-}
-
-/*background color*/
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #707880 !important;
-  background: #f7f7f7 !important;
-  border: 1px solid #E3E2E3 !important;
-  border-radius: 2px !important;
-}
-
-/*selection color*/
-.hljs::selection,
-.hljs span::selection {
-  background: #f7f7f7;
-}
-
-.hljs::-moz-selection,
-.hljs span::-moz-selection {
-  background: #f7f7f7;
-}
-
-/*foreground color*/
-.hljs {
-  color: #707880;
-}
-
-/*color: fg_yellow*/
-.hljs-title,
-.hljs-name {
-  color: #f0c674;
-}
-
-/*color: fg_comment*/
-.hljs-comment,
-.hljs-meta,
-.hljs-meta .hljs-keyword {
-  color: #707880;
-}
-
-/*color: fg_red*/
-.hljs-number,
-.hljs-symbol,
-.hljs-literal,
-.hljs-deletion,
-.hljs-link {
- color: #cc6666
-}
-
-/*color: fg_green*/
-.hljs-string,
-.hljs-doctag,
-.hljs-addition,
-.hljs-regexp,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #b5bd68;
-}
-
-/*color: fg_purple*/
-.hljs-attribute,
-.hljs-code,
-.hljs-selector-id {
- color: #b294bb;
-}
-
-/*color: fg_blue*/
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-bullet,
-.hljs-tag {
- color: #81a2be;
-}
-
-/*color: fg_aqua*/
-.hljs-subst,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #8abeb7;
-}
-
-/*color: fg_orange*/
-.hljs-type,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-quote,
-.hljs-section,
-.hljs-selector-class {
-  color: #de935f;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

assets/css/main.scss

@@ -4,13 +4,9 @@
 @charset "utf-8";
 
 
-// Import partials from `sass_dir` (defaults to `_sass`)
-// @import "mdb/core/bootstrap/bootstrap";
-// @import "mdb/mdb";
 
 @import
   "variables",
   "layout",
-  "base",
+  "base"
-  "syntax-highlighting"
 ;