Update blog post: 2020-04-13-post-template. Update text code blocks format. Use code font Roboto Mono as default. Update README.md

Author: liuyxpp

README.md

@@ -30,10 +30,13 @@ If you wish to use the Jekyll theme of this website, please follow the guideline
 
 1. Please give credit by starring [this project](https://github.com/liuyxpp/liuyxpp.github.io) and/or display this line on your website: <q>This website is powered by [LYX Jekyll theme](https://github.com/liuyxpp/liuyxpp.github.io)</q>.
 2. Remove all personal materials and personal information about me (Yi-Xin Liu).
-3. Remove all the contents in the following directories: `_posts`, `_drafts`, `_data`, `_site`, `CV`, `downloads`, `images`, `publications`, `research`, and `software`.
+3. Remove all the contents in the following directories: `_posts`, `_drafts`, `_data`, `_site`, `downloads`, `images`, and `pages`.
 4. Modify the configuration file `_config.yml` to add your own personal information.
 5. Add your contents.
-6. Publish your website.
+6. You can add your own per category page at `blog/category` by editing the sample pages. Just remove all `.md` files if you don't want any per category page.
+7. Publish your website.
+
+A Sample blog post/template can be found at `_posts/2020-04-13-post-template.md`. It also includes some guidelines to write blog posts with this Jekyll theme. You can read it [here]({% post_url 2020-04-13-post-template.md %}).
 
 ## Important Notice
 

_includes/head.html

@@ -53,11 +53,15 @@
 <script src="{{ site.url }}/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
 
 <!-- Custom Fonts -->
-<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">
+<!-- For headings -->
+<link href="//fonts.googleapis.com/css?family=Lato:700&display=swap" rel="stylesheet" type="text/css">
 <!-- <link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> -->
 <!-- <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> -->
 <!-- <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700&display=swap" rel="stylesheet"> -->
+<!-- For site logo -->
 <link href='http://fonts.googleapis.com/css?family=Viga|Ubuntu:700' rel='stylesheet' type='text/css'>
+<!-- For codes -->
+<!-- <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i&display=swap" rel="stylesheet"> -->
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 <!-- Icons -->

_posts/2020-04-13-post-template.md

@@ -135,13 +135,21 @@ struct GeneralizedPeak <: ScatteringPeak
 end
 {% endhighlight %}
 
-`Output` as `Markdown` syntax highlighting using fencing blocks:
+The output by running previous code block is formatted as language `text` whose syntax highlighting using fencing blocks:
 
-{% highlight markdown linenos %}
+```
+Translation{Float64}([1.0, 2.0, 3.0])
+```
+
+The output syntax highlighting using Liquid fencing blocks:
+
+{% highlight text linenos %}
 Translation{Float64}([1.0, 2.0, 3.0])
 {% endhighlight %}
 
-`Console` syntax highlighting using fencing code blocks
+Note that the appearance is different from fencing blocks because `<pre>` is the parent of `<code data-lang=text>`. We can not select the `<pre>` to markup using `CSS` rules.
+
+`Console` syntax highlighting using fencing code blocks:
 
 ```console?lang=julia
 julia> f(x, y) = x + y
@@ -151,7 +159,7 @@ julia> f(3, 4)
 7
 ```
 
-`Console` syntax highlighting using Liquid code blocks
+`Console` syntax highlighting using Liquid code blocks:
 
 {% highlight console linenos %}
 julia> f(x, y) = x + y
@@ -171,6 +179,13 @@ Note that since we can not set the `lang=julia` as in fencing code blocks, the L
 * Fencing code blocks' ticks can be output like this: ````<code>```</code>```` &rarr; <code>```</code>.
 * Don't be lazy with `alternative`/`code`/`formatting`.
 
+## Links
+
+* External links: the [github](https://github.com).
+* Internal pages: the [Research page](/research/).
+* Internal blog posts: [Julia in Practice: Building Scattering.jl from Scratch (1)]({% post_url 2020-03-19-scattering-1 %}).
+* In-page links: [Heading](#heading)
+
 ## Images
 
 * Centered: use `.center`

_sass/_page.scss

@@ -291,7 +291,7 @@ header .entry-meta {
         }
     }
     div.highlighter-rouge {
-        margin: 0;
+        //margin: 0;
         padding-top: 10px;
         padding-bottom: 10px;
     }

_sass/_syntax.scss

@@ -11,7 +11,7 @@
 div.highlighter-rouge,
 figure.highlight {
   position: relative;
-  margin-bottom: 1em;
+  margin-bottom: 16px;
   line-height: 1.8;
   border-radius: 3;
 
@@ -29,6 +29,21 @@ figure.highlight {
             color: $lang-color;
             font-size: 12px;
         }
+        &[data-lang=text] {
+            background-color: $text-lang-bg-color;
+            tr {
+                background-color: $text-lang-bg-color;
+                &:hover {
+                    background-color: $gray-lighter;
+                    td, pre {
+                        background-color: $gray-lighter;
+                    }
+                }
+            }
+            pre {
+                background-color: $text-lang-bg-color;
+            }
+        }
     }
   }
 
@@ -213,6 +228,7 @@ div.language-yaml {
 div.language-text {
     position: relative;
     pre.highlight {
+        background-color: $text-lang-bg-color;
         padding: 14px;
         &::before {
             content: "text";
@@ -223,6 +239,18 @@ div.language-text {
             font-size: 12px;
         }
     }
+    tr {
+        background-color: $text-lang-bg-color;
+        &:hover {
+            background-color: $gray-lighter;
+            td, pre {
+                background-color: $gray-lighter;
+            }
+        }
+    }
+    pre {
+        background-color: $text-lang-bg-color;
+    }
 }
 
 /* Hack: mobile browser no border */

_sass/_variables.scss

@@ -5,7 +5,7 @@
 $base-font: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 $heading-font: 'Lato','Open Sans','Helvetica Neue',Helvetica,Calibri,Arial,sans-serif;
 $caption-font: 'Lato','Open Sans','Helvetica Neue',Helvetica,Calibri,Arial,sans-serif;
-$code-font: "Monaco","Inconsolata","DejaVu Sans Mono","Andale Mono WT","Andale Mono","Courier New",Courier,monospace;
+$code-font: "Roboto Mono","Monaco","Inconsolata","DejaVu Sans Mono","Andale Mono WT","Andale Mono","Courier New",Courier,monospace;
 $alt-font: serif;
 $site-title-font: 'Viga', $heading-font;
 
@@ -58,7 +58,10 @@ $danger	:       $alizarin;
 $info:          $peter-river;
 
 /* syntax highlighting */
+// for display language name on the upper right corner of the code block panel
 $lang-color: $gray;
+// only for language text/plaintext, background color of the code block panel
+$text-lang-bg-color: lighten($wet-asphalt, 66%);
 
 $base-color:    $black-almost;
 $body-color:    $white-almost;