Update docs

_posts/2019-08-08-text-and-typography.md

@@ -176,44 +176,23 @@ SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
 ```
 
-#### Ruby
-
-```ruby
-def sum_eq_n?(arr, n)
-  return true if arr.empty? && n == 0
-  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
-end
-```
-
 #### Shell
 
-```shell
+```bash
 if [ $? -ne 0 ]; then
     echo "The command was not successful.";
     #do the needful / exit
 fi;
 ```
 
-#### Liquid
+### Specific filename
 
-{% raw %}
+```sass
-```liquid
+@import
-{% if product.title contains 'Pack' %}
+  "colors/light-typography",
-  This product's title contains the word Pack.
+  "colors/dark-typography"
-{% endif %}
-```
-{% endraw %}
-
-#### Java
-
-```java
-private void writeObject(java.io.ObjectOutputStream s)
-  throws java.io.IOException {
-  // Write out any hidden serialization magic
-  s.defaultWriteObject();
-  for (E e: map.keySet()) s.writeObject(e);
-}
 ```
+{: file='_sass/jekyll-theme-chirpy.scss'}
 
 ## Reverse Footnote
 

_posts/2019-08-08-write-a-new-post.md

@@ -4,6 +4,7 @@ author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
+render_with_liquid: false
 ---
 
 ## Naming and Path
@@ -163,7 +164,7 @@ If you host the images on the CDN, you can save the time of repeatedly writing t
 ```yaml
 img_cdn: https://cdn.com
 ```
-{: .nolineno}
+{: file='_config.yml' .nolineno}
 
 Once `img_cdn` is assigned, the CDN url will be added to the path of all images (images of site avatar and posts) starting with `/`.
 
@@ -193,30 +194,27 @@ pin: true
 
 ## Code Block
 
-Markdown symbols ```` ``` ```` can easily create a code block as following examples.
+Markdown symbols ```` ``` ```` can easily create a code block as follows:
 
 ```
-This is a common code snippet, without syntax highlight and line number.
+This is a plaintext code snippet.
 ```
 
-### Specific Language
+### Specifying Language
 
-Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
+Using ```` ```{language} ```` you will get a code block with syntax highlight:
-
-> **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
 
+````markdown
 ```yaml
-# Yaml code snippet
+key: value
-items:
-    - part_no:   A4786
-      descrip:   Water Bucket (Filled)
-      price:     1.47
-      quantity:  4
 ```
+````
 
-### Hiding Line Number
+> **Limination**: The Jekyll style `highlight` tag ais not compatible with this theme.
 
-When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line of it:
+### Line Number
+
+By default, all languages except `plaintext`, `console` and `terminal` will display line numbers. When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line:
 
 ````markdown
 ```shell
@@ -225,10 +223,22 @@ echo 'No more line numbers!'
 {: .nolineno}
 ````
 
+### Specifying the Filename
+
+You may have noticed that the code language will be displayed on the left side of the header of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
+
+````markdown
+```shell
+# content
+```
+{: file="path/to/file" }
+````
+
 ### Liquid Codes
 
-If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
 
+````markdown
 {% raw %}
 ```liquid
 {% if product.title contains 'Pack' %}
@@ -236,6 +246,9 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 {% endif %}
 ```
 {% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
 ## Learn More
 

_posts/2019-08-09-getting-started.md

@@ -25,14 +25,14 @@ Add this line to your Jekyll site's `Gemfile`:
 ```ruby
 gem "jekyll-theme-chirpy"
 ```
-{: .nolineno}
+{: .nolineno file='Gemfile' }
 
 And add this line to your Jekyll site's `_config.yml`:
 
 ```yaml
 theme: jekyll-theme-chirpy
 ```
-{: .nolineno}
+{: .nolineno file='_config.yml' }
 
 And then execute:
 

_posts/2021-01-03-enable-google-pv.md

@@ -45,6 +45,7 @@ google_analytics:
     proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
     cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
+{: file="_config.yml"}
 
 When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
 
@@ -140,6 +141,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
     # XSRF Settings
     XSRF_KEY = 'OnceUponATimeThereLivedALegend'
     ```
+    {: file="src/config.py"}
 
     **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
 
@@ -226,6 +228,7 @@ google_analytics:
     proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
     cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
+{: file="_config.yml"}
 
 Now, you should see the Page View enabled on your blog.