From 60ed29eb5ba133902cbe2c97936186cda8e344ea Mon Sep 17 00:00:00 2001 From: Maruan Al-Shedivat Date: Sat, 2 May 2020 17:08:36 -0400 Subject: [PATCH] Fix code highlighting --- _config.yml | 13 +++- _includes/hemline.html | 6 +- _posts/2015-07-15-code.markdown | 10 ++- _sass/_base.scss | 6 ++ _sass/_syntax-highlighting.scss | 106 -------------------------------- assets/css/main.scss | 6 +- 6 files changed, 26 insertions(+), 121 deletions(-) delete mode 100644 _sass/_syntax-highlighting.scss diff --git a/_config.yml b/_config.yml index d008cce..721d41e 100644 --- a/_config.yml +++ b/_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 diff --git a/_includes/hemline.html b/_includes/hemline.html index 6109676..08f0095 100644 --- a/_includes/hemline.html +++ b/_includes/hemline.html @@ -8,11 +8,7 @@ -{% if site.enable_highlight %} - - - -{% endif %} + {% if site.enable_katex %} diff --git a/_posts/2015-07-15-code.markdown b/_posts/2015-07-15-code.markdown index 884f2d1..2dc73ce 100644 --- a/_posts/2015-07-15-code.markdown +++ b/_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++ %}
code code code
{% endhighlight %} +{% highlight c++ linenos %}
code code code
{% 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[]) { diff --git a/_sass/_base.scss b/_sass/_base.scss index f97845b..b74bc40 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -16,6 +16,12 @@ a, table.table a { } } +// Math +.equation { + margin-bottom: 1rem; + text-align: center; +} + // Profile diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss deleted file mode 100644 index 1ac16d8..0000000 --- a/_sass/_syntax-highlighting.scss +++ /dev/null @@ -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; -} diff --git a/assets/css/main.scss b/assets/css/main.scss index ed7cf15..85bdff6 100644 --- a/assets/css/main.scss +++ b/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", - "syntax-highlighting" + "base" ;