Hide line number of some posts

This commit is contained in:
Cotes Chung 2021-09-13 22:36:01 +08:00
parent 20454e5a57
commit 91ed3d4649
2 changed files with 24 additions and 2 deletions

View File

@ -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: [**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 mermaid: true
--- ---
@ -107,6 +107,7 @@ Add italics to the next line of an imagethen it will become the caption and a
![img-description](/path/to/image) ![img-description](/path/to/image)
_Image Caption_ _Image Caption_
``` ```
{: .nolineno}
### Image size ### Image size
@ -115,6 +116,7 @@ In order to prevent the page content layout from shifting when the image is load
```markdown ```markdown
![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" } ![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
``` ```
{: .nolineno}
### Image position ### Image position
@ -127,18 +129,21 @@ By default, the image is centered, but you can specify the position by using one
```markdown ```markdown
![Desktop View](/assets/img/sample/mockup.png){: .normal } ![Desktop View](/assets/img/sample/mockup.png){: .normal }
``` ```
{: .nolineno}
- **Float to the left** - **Float to the left**
```markdown ```markdown
![Desktop View](/assets/img/sample/mockup.png){: .left } ![Desktop View](/assets/img/sample/mockup.png){: .left }
``` ```
{: .nolineno}
- **Float to the right** - **Float to the right**
```markdown ```markdown
![Desktop View](/assets/img/sample/mockup.png){: .right } ![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. > **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 ```markdown
![Desktop View](/assets/img/sample/mockup.png){: .shadow } ![Desktop View](/assets/img/sample/mockup.png){: .shadow }
``` ```
{: .nolineno}
### CDN URL ### CDN URL
@ -157,6 +163,7 @@ If you host the images on the CDN, you can save the time of repeatedly writing t
```yaml ```yaml
img_cdn: https://cdn.com 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 `/`. 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 ```markdown
![The flower](/path/to/flower.png) ![The flower](/path/to/flower.png)
``` ```
{: .nolineno}
The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path: The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
```html ```html
<img src="https://cdn.com/path/to/flower.png" alt="The flower"> <img src="https://cdn.com/path/to/flower.png" alt="The flower">
``` ```
{: .nolineno}
## Pinned Posts ## 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. 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. Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
@ -205,6 +214,17 @@ items:
quantity: 4 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 ### 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 %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .

View File

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