From 756465d62193793e01d4e307e588543c8b213cac Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 22 Jan 2022 22:41:23 +0800 Subject: [PATCH 1/2] Add `filepath` style for code --- _sass/addon/syntax.scss | 9 ++++++++- _sass/colors/dark-syntax.scss | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index 6ace78d..9feee5a 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -110,6 +110,13 @@ code { background-color: var(--inline-code-bg); } + &.filepath { + background-color: inherit; + color: var(--filepath-text-color); + font-weight: 600; + padding: 0; + } + a > &.highlighter-rouge { padding-bottom: 0; // show link's underlinke color: inherit; @@ -119,7 +126,7 @@ code { border-bottom: none; } - blockquote &.highlighter-rouge { + blockquote & { color: inherit; } diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss index fb7c52a..8030487 100644 --- a/_sass/colors/dark-syntax.scss +++ b/_sass/colors/dark-syntax.scss @@ -78,6 +78,7 @@ --code-header-muted-color: rgb(60 60 60); --code-header-icon-color: rgb(86 86 86); --clipboard-checked-color: #2bcc2b; + --filepath-text-color: #bdbdbd; .highlight { .gp { color: #818c96; } From c344926886588aa01e2bd70474b0020b90033e6d Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 22 Jan 2022 23:21:00 +0800 Subject: [PATCH 2/2] Show the `filepath` style in docs --- _posts/2019-08-08-text-and-typography.md | 4 +++ _posts/2019-08-08-write-a-new-post.md | 36 ++++++++++++++++------ _posts/2019-08-09-getting-started.md | 30 +++++++++--------- _posts/2019-08-11-customize-the-favicon.md | 8 ++--- _posts/2021-01-03-enable-google-pv.md | 12 ++++---- _tabs/about.md | 3 +- 6 files changed, 56 insertions(+), 37 deletions(-) diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index bc1f553..0cbae83 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -154,6 +154,10 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ This is an example of `Inline Code`. +## Filepath + +Here is the `/path/to/the/file.extend`{: .filepath}. + ## Code block ### Common diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index df46625..655ee25 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -13,7 +13,7 @@ This post will guide you how to write a post on _Chirpy_ theme. Even if you have ## Naming and Path -Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this. +Create a new file named `YYYY-MM-DD-TITLE.EXTENSION`{: .filepath} and put it in the `_posts`{: .filepath} of the root directory. Please note that the `EXTENSION`{: .filepath} must be one of `md`{: .filepath} and `markdown`{: .filepath}. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this. ## Front Matter @@ -32,7 +32,7 @@ tags: [TAG] # TAG names should always be lowercase ### Timezone of Date -In order to accurately record the release date of a post, you should not only set up the `timezone` of _\_config.yml_ but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`. +In order to accurately record the release date of a post, you should not only set up the `timezone` of `_config.yml`{: .filepath} but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`. ### Categories and Tags @@ -59,7 +59,7 @@ author: ## Table of Contents -By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to _\_config.yml_ and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/): +By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/): ```yaml --- @@ -69,7 +69,7 @@ toc: false ## Comments -The global switch of comments is defined by variable `comments.active` in the file _\_config.yml_. After selecting a comment system for this variable, comments will be turned on for all posts. +The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts. If you want to close the comment for a specific post, add the following to the **Front Matter** of the post: @@ -169,7 +169,7 @@ The screenshots of the program window can be considered to show the shadow effec ### CDN URL -If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of _\_config.yml_ file: +If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file: ```yaml img_cdn: https://cdn.com @@ -245,7 +245,23 @@ pin: true --- ``` -## Code Block +## Syntax + +### Inline Code + +```md +`inline code part` +``` +{: .nolineno } + +### Filepath Hightlight + +```md +`/path/to/a/file.extend`{: .filepath} +``` +{: .nolineno } + +### Code Block Markdown symbols ```` ``` ```` can easily create a code block as follows: @@ -255,7 +271,7 @@ This is a plaintext code snippet. ``` ```` -### Specifying Language +#### Specifying Language Using ```` ```{language} ```` you will get a code block with syntax highlight: @@ -267,7 +283,7 @@ key: value > **Limitation**: The Jekyll style `highlight` tag is not compatible with this theme. -### Line Number +#### Line Number By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it: @@ -278,7 +294,7 @@ echo 'No more line numbers!' {: .nolineno } ```` -### Specifying the Filename +#### Specifying the Filename You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this: @@ -289,7 +305,7 @@ You may have noticed that the code language will be displayed at the top of the {: file="path/to/file" } ```` -### Liquid Codes +#### Liquid Codes If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`: diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index b45fe62..0b354c4 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -41,13 +41,13 @@ $ bash tools/init.sh The above command will: 1. Removes some files or directories from your repository: - - `.travis.yml` - - files under `_posts` - - folder `docs` + - `.travis.yml`{: .filepath} + - files under `_posts`{: .filepath} + - folder `docs`{: .filepath} -2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`. +2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}. -3. Removes item `Gemfile.lock` from `.gitignore`. +3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}. 4. Creates a new commit to save the changes automatically. @@ -63,7 +63,7 @@ $ bundle ### Configuration -Update the variables of `_config.yml` as needed. Some of them are typical options: +Update the variables of `_config.yml`{: .filepath} as needed. Some of them are typical options: - `url` - `avatar` @@ -72,9 +72,9 @@ Update the variables of `_config.yml` as needed. Some of them are typical option ### Customing Stylesheet -If you need to customize the stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file. +If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of the style file. -Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it. +Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, create a new file `_sass/variables-hook.scss`{: .filepath} and assign new values to the target variable in it. ### Running Local Server @@ -97,7 +97,7 @@ After a while, the local service will be published at __. ## Deployment -Before the deployment begins, check out the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`. +Before the deployment begins, check out the file `_config.yml`{: .filepath} and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`. Now you can choose ONE of the following methods to deploy your Jekyll site. @@ -107,11 +107,11 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us Quickly check the files needed for GitHub Actions build: -- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. +- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`{: .filepath}. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. -- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site. +- Ensure your Jekyll site has file `tools/deploy.sh`{: .filepath}. Otherwise, copy it from here to your Jekyll site. -- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file: +- Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file: ```console $ bundle lock --add-platform x86_64-linux @@ -149,13 +149,13 @@ $ docker run -it --rm \ jekyll build ``` -Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to the target server. +Unless you specified the output path, the generated site files will be placed in folder `_site`{: .filepath} of the project's root directory. Now you should upload those files to the target server. ## Upgrading It depends on how you use the theme: -- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the theme gem, for example: +- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`{: .filepath}), editing the `Gemfile`{: .filepath} and update the version number of the theme gem, for example: ```diff - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1" @@ -171,7 +171,7 @@ It depends on how you use the theme: As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme. -- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade. +- If you forked from the source project (there will be `gemspec` in the `Gemfile`{: .filepath} of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade. The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts. [starter]: https://github.com/cotes2020/chirpy-starter diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md index 99178a5..04ef490 100644 --- a/_posts/2019-08-11-customize-the-favicon.md +++ b/_posts/2019-08-11-customize-the-favicon.md @@ -8,7 +8,7 @@ categories: [Blogging, Tutorial] tags: [favicon] --- -The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons. +The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`{: .filepath}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons. ## Generate the favicon @@ -20,10 +20,10 @@ In the next step, the webpage will show all usage scenarios. You can keep the de Download the generated package, unzip and delete the following two from the extracted files: -- `browserconfig.xml` -- `site.webmanifest` +- `browserconfig.xml`{: .filepath} +- `site.webmanifest`{: .filepath} -And then copy the remaining image files (`PNG` and `ICO`) to cover the original files in the directory `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one. +And then copy the remaining image files (`.PNG`{: .filepath} and `.ICO`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one. The following table will help you understand the changes to the favicon files: diff --git a/_posts/2021-01-03-enable-google-pv.md b/_posts/2021-01-03-enable-google-pv.md index c9883a6..3380fe9 100644 --- a/_posts/2021-01-03-enable-google-pv.md +++ b/_posts/2021-01-03-enable-google-pv.md @@ -37,7 +37,7 @@ It should look like this: ![google-analytics-data-stream](/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"} -Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file +Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml`{: .filepath} file: ```yaml google_analytics: @@ -115,16 +115,16 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions 1. Clone the **Google Analytics superProxy** project on Github: to your local. -2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file: +2. Remove the first 2 lines in the [`src/app.yaml`{: .filepath}](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file: ```diff - application: your-project-id - version: 1 ``` -3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from your App Engine Dashboard. +3. In `src/config.py`{: .filepath}, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from your App Engine Dashboard. -4. Enter any random key for `XSRF_KEY`, your `config.py` should look similar to this +4. Enter any random key for `XSRF_KEY`, your `config.py`{: .filepath} should look similar to this ```python #!/usr/bin/python2.7 @@ -148,7 +148,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions **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. -5. From inside the src/ directory, deploy the app +5. From inside the `src/`{: .filepath} directory, deploy the app ```console [root@bc96abf71ef8 src]# gcloud app deploy @@ -221,7 +221,7 @@ Once all the hard part is done, it is very easy to enable the Page View on Chirp ![superproxy-dashboard](/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"} -Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following: +Update the `_config.yml`{: .filepath} file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following: ```yaml google_analytics: diff --git a/_tabs/about.md b/_tabs/about.md index b511014..2d8b10f 100644 --- a/_tabs/about.md +++ b/_tabs/about.md @@ -4,5 +4,4 @@ icon: fas fa-info-circle order: 4 --- - -> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page. +> **Note**: Add Markdown syntax content to file `_tabs/about.md`{: .filepath } and it will show up on this page.