Fix code highlighting

Author: alshedivat

_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 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 %}
+<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
 
 {% 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

@@ -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",
-  "syntax-highlighting"
+  "base"
 ;