diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index 86ea991..387edef 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -72,7 +72,7 @@ math: true [**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block: -```yml +```yaml --- mermaid: true --- @@ -107,6 +107,7 @@ Add italics to the next line of an imageļ¼Œthen it will become the caption and a ![img-description](/path/to/image) _Image Caption_ ``` +{: .nolineno} ### Image size @@ -115,6 +116,7 @@ In order to prevent the page content layout from shifting when the image is load ```markdown ![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" } ``` +{: .nolineno} ### Image position @@ -127,18 +129,21 @@ By default, the image is centered, but you can specify the position by using one ```markdown ![Desktop View](/assets/img/sample/mockup.png){: .normal } ``` + {: .nolineno} - **Float to the left** ```markdown ![Desktop View](/assets/img/sample/mockup.png){: .left } ``` + {: .nolineno} - **Float to the right** ```markdown ![Desktop View](/assets/img/sample/mockup.png){: .right } ``` + {: .nolineno} > **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption. @@ -149,6 +154,7 @@ The screenshots of the program window can be considered to show the shadow effec ```markdown ![Desktop View](/assets/img/sample/mockup.png){: .shadow } ``` +{: .nolineno} ### CDN URL @@ -157,6 +163,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} 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 `/`. @@ -165,12 +172,14 @@ For instance, when using images: ```markdown ![The flower](/path/to/flower.png) ``` +{: .nolineno} The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path: ```html The flower ``` +{: .nolineno} ## Pinned Posts @@ -190,7 +199,7 @@ Markdown symbols ```` ``` ```` can easily create a code block as following examp This is a common code snippet, without syntax highlight and line number. ``` -## Specific Language +### Specific Language Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight. @@ -205,6 +214,17 @@ items: quantity: 4 ``` +### Hiding Line Number + +When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line of it: + +````markdown +```shell +echo 'No more line numbers!' +``` +{: .nolineno} +```` + ### 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%}` . diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 634d410..879ffdb 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -25,12 +25,14 @@ Add this line to your Jekyll site's `Gemfile`: ```ruby gem "jekyll-theme-chirpy" ``` +{: .nolineno} And add this line to your Jekyll site's `_config.yml`: ```yaml theme: jekyll-theme-chirpy ``` +{: .nolineno} And then execute: diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index eda2e50..0efddb6 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -152,7 +152,8 @@ div { &[class^='highlighter-rouge'], &.language-plaintext.highlighter-rouge, &.language-console.highlighter-rouge, - &.language-terminal.highlighter-rouge { + &.language-terminal.highlighter-rouge, + &.nolineno { pre.lineno { display: none; }