fix: code block highlighting themes

Renovamen · Feb 3, 2021 · 9dea15f · 9dea15f · vercel · Feb 3, 2021
1 parent 651cd0a
commit 9dea15f
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 12 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -1,6 +1,6 @@
 # Gungnir
 
-[![npm](https://img.shields.io/npm/v/vuepress-theme-gungnir.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-gungnir) [![docs](https://img.shields.io/badge/Docs-Gungnir-26A2FF?style=flat-square&logo=read-the-docs&logoColor=ffffff)](https://github.com/Renovamen/vuepress-theme-gungnir) [![license](https://img.shields.io/badge/License-Apache--2.0-green?style=flat-square)](LICENSE)
+[![npm](https://img.shields.io/npm/v/vuepress-theme-gungnir.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-gungnir) [![docs](https://img.shields.io/badge/Docs-Gungnir-26A2FF?style=flat-square&logo=read-the-docs&logoColor=ffffff)](https://vuepress-theme-gungnir.vercel.app/docs/) [![license](https://img.shields.io/badge/License-Apache--2.0-green?style=flat-square)](LICENSE)
 
 一个基于 [VuePress](https://vuepress.vuejs.org/) 的博客主题。同时[这里](https://github.com/Renovamen/jekyll-theme-gungnir)还有一个它的 [Jekyll](https://jekyllrb.com/) 版本。
 
@@ -22,7 +22,7 @@
 - 明亮和夜间模式：识别系统的外观设置并自动切换模式，也支持用户手动切换
 - 搜索
 - 文章目录
-- 代码高亮渲染，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
+- 多种代码高亮主题，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
 - 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
 - 在文章中使用图表：[Chart.js](https://www.chartjs.org)、[Mermaid](https://mermaid-js.github.io) 和 [roughViz.js](https://github.com/jwilber/roughViz)
 - 文章中的一些附加样式，目前支持：

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Gungnir
 
-[![npm](https://img.shields.io/npm/v/vuepress-theme-gungnir.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-gungnir) [![docs](https://img.shields.io/badge/Docs-Gungnir-26A2FF?style=flat-square&logo=read-the-docs&logoColor=ffffff)](https://github.com/Renovamen/vuepress-theme-gungnir) [![license](https://img.shields.io/badge/License-Apache--2.0-green?style=flat-square)](LICENSE)
+[![npm](https://img.shields.io/npm/v/vuepress-theme-gungnir.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-gungnir) [![docs](https://img.shields.io/badge/Docs-Gungnir-26A2FF?style=flat-square&logo=read-the-docs&logoColor=ffffff)](https://vuepress-theme-gungnir.vercel.app/docs/) [![license](https://img.shields.io/badge/License-Apache--2.0-green?style=flat-square)](LICENSE)
 
 A blog theme for [VuePress](https://vuepress.vuejs.org/). The [Jekyll](https://jekyllrb.com/) version of it is available [here](https://github.com/Renovamen/jekyll-theme-gungnir).
 
@@ -22,7 +22,7 @@ A blog theme for [VuePress](https://vuepress.vuejs.org/). The [Jekyll](https://j
 - Dark and light mode: system theme detection with a theme-switcher to set the theme as per the user preference
 - Search
 - Table of contents
-- Syntax highlighting, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
+- Multiple syntax highlighting themes, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
 - Tex support ([Katex](https://github.com/KaTeX/KaTeX))
 - Draw charts in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io) and [roughViz.js](https://github.com/jwilber/roughViz)
 - Markdown enhancements:

diff --git a/example/.vuepress/public/highlight/gungnir-dark.css b/example/.vuepress/public/highlight/gungnir-dark.css
@@ -43,6 +43,10 @@ pre[class*="language-"] {
     overflow: auto;
 }
 
+pre code, pre[class*="language-"] code {
+    color: #fff;
+}
+
 /* :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
     background: #282c34;

diff --git a/example/.vuepress/styles/palette.styl b/example/.vuepress/styles/palette.styl
@@ -0,0 +1,2 @@
+$codeBgColor = #282c34
+$codeHighlightLineColor = rgba(0, 0, 0, 66%)
diff --git a/example/docs/README.md b/example/docs/README.md
@@ -45,7 +45,7 @@ Gungnir is the spear of the god Odin in Norse mythology, made from the wood of t
 - Dark and light mode: system theme detection with a theme-switcher to set the theme as per the user preference
 - Search
 - Table of contents
-- Syntax highlighting, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
+- Multiple syntax highlighting themes, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
 - Tex support ([Katex](https://github.com/KaTeX/KaTeX))
 - Draw charts in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io) and [roughViz.js](https://github.com/jwilber/roughViz)
 - Markdown enhancements:

diff --git a/example/zh/docs/README.md b/example/zh/docs/README.md
@@ -47,7 +47,7 @@ Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题，在 [H
 - 明亮和夜间模式：识别系统的外观设置并自动切换模式，也支持用户手动切换
 - 搜索
 - 文章目录
-- 代码高亮渲染，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
+- 多种代码高亮主题，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
 - 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
 - 在文章中使用图表：[Chart.js](https://www.chartjs.org)、[Mermaid](https://mermaid-js.github.io) 和 [roughViz.js](https://github.com/jwilber/roughViz)
 - 文章中的一些附加样式，目前支持：

diff --git a/packages/theme-gungnir/README-CN.md b/packages/theme-gungnir/README-CN.md
@@ -0,0 +1,71 @@
+# Gungnir
+
+[![npm](https://img.shields.io/npm/v/vuepress-theme-gungnir.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-gungnir) [![docs](https://img.shields.io/badge/Docs-Gungnir-26A2FF?style=flat-square&logo=read-the-docs&logoColor=ffffff)](https://vuepress-theme-gungnir.vercel.app/docs/) [![license](https://img.shields.io/badge/License-Apache--2.0-green?style=flat-square)](LICENSE)
+
+一个基于 [VuePress](https://vuepress.vuejs.org/) 的博客主题。同时[这里](https://github.com/Renovamen/jekyll-theme-gungnir)还有一个它的 [Jekyll](https://jekyllrb.com/) 版本。
+
+**Gungnir**，冈格尼尔，北欧神话中主神奥丁使用的用世界树树枝做成的武器，和本主题没有半毛钱关系但我就是用了这个名字。
+
+🇬🇧 [English Intro](README.md) | 🇨🇳 中文说明
+
+![preview](../../example/.vuepress/public/img/docs/gungnir.jpg)
+
+
+&nbsp;
+
+## 特性
+
+- 简洁美观（反正这点我说是就是了）
+- 响应式
+- 多级目录
+- 可切换的首页大图
+- 明亮和夜间模式：识别系统的外观设置并自动切换模式，也支持用户手动切换
+- 搜索
+- 文章目录
+- 多种代码高亮主题，支持代码块全屏（从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能）
+- 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
+- 在文章中使用图表：[Chart.js](https://www.chartjs.org)、[Mermaid](https://mermaid-js.github.io) 和 [roughViz.js](https://github.com/jwilber/roughViz)
+- 文章中的一些附加样式，目前支持：
+  - 脚注（基于 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)）
+  - 高亮（基于 [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)）
+- 站点统计（[Google Analytics](https://analytics.google.com/) 和 [百度统计](https://tongji.baidu.com/)）
+- 评论（基于 [Vssue](https://github.com/meteorlxy/vssue)）
+- RSS
+- 阅读时间估计
+- 多语言支持（英文、简体中文）
+- 带标签的归档页、链接页
+
+
+&nbsp;
+
+## 安装
+
+```bash
+yarn add -D vuepress-theme-gungnir
+# or
+npm i -D vuepress-theme-gungnir
+```
+
+
+&nbsp;
+
+## 演示站点
+
+这里有一些演示站点：
+
+- [vuepress-theme-gungnir.vercel.app](https://vuepress-theme-gungnir.vercel.app/)
+- [renovamen.ink](https://renovamen.ink)（我的博客）
+
+
+&nbsp;
+
+## 文档
+
+[这里](https://vuepress-theme-gungnir.vercel.app/docs/)是本主题的（正在施工中的）文档。
+
+
+&nbsp;
+
+## 开源协议
+
+Gungnir 主题遵守 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) 开源协议，详细细节见 [LICENSE](packages/theme-gungnir/LICENSE) 文件。
diff --git a/packages/theme-gungnir/README.md b/packages/theme-gungnir/README.md
@@ -1,12 +1,41 @@
 # Gungnir
 
-This is an ongoing VuePress version of the blog theme Gungnir. The Jekyll version of it is available [here](https://github.com/Renovamen/jekyll-theme-gungnir).
+[![npm](https://img.shields.io/npm/v/vuepress-theme-gungnir.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-gungnir) [![docs](https://img.shields.io/badge/Docs-Gungnir-26A2FF?style=flat-square&logo=read-the-docs&logoColor=ffffff)](https://vuepress-theme-gungnir.vercel.app/docs/) [![license](https://img.shields.io/badge/License-Apache--2.0-green?style=flat-square)](LICENSE)
+
+A blog theme for [VuePress](https://vuepress.vuejs.org/). The [Jekyll](https://jekyllrb.com/) version of it is available [here](https://github.com/Renovamen/jekyll-theme-gungnir).
 
 **Gungnir** is the spear of the god Odin in Norse mythology.
 
+🇬🇧 English Intro | 🇨🇳 [中文说明](README-CN.md)
+
 ![preview](../../example/.vuepress/public/img/docs/gungnir.jpg)
 
 
+&nbsp;
+
+## Features
+
+- Simple and beautiful
+- Responsive design
+- Multi-level navigation
+- Switchable cover images for home page
+- Dark and light mode: system theme detection with a theme-switcher to set the theme as per the user preference
+- Search
+- Table of contents
+- Multiple syntax highlighting themes, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
+- Tex support ([Katex](https://github.com/KaTeX/KaTeX))
+- Draw charts in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io) and [roughViz.js](https://github.com/jwilber/roughViz)
+- Markdown enhancements:
+  - Footnote ([markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote))
+  - Mark ([markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))
+- Analytics ([Google Analytics](https://analytics.google.com/) and [Baidu Tongji](https://tongji.baidu.com/))
+- Comment ([Vssue](https://github.com/meteorlxy/vssue))
+- RSS
+- Reading time
+- Multi-language support (English, Simplified Chinese)
+- Archive page with tags, links page
+
+
 &nbsp;
 
 ## Installation
@@ -28,6 +57,13 @@ Here are some live demos:
 - [renovamen.ink](https://renovamen.ink) (my blog)
 
 
+&nbsp;
+
+## Documentation
+
+Documentation is available (but ongoing) [here](https://vuepress-theme-gungnir.vercel.app/docs/).
+
+
 &nbsp;
 
 ## License

diff --git a/packages/theme-gungnir/styles/code.styl b/packages/theme-gungnir/styles/code.styl
@@ -21,7 +21,6 @@
     border-radius 6px
     overflow auto
     code
-      color #fff
       padding 0
       background-color transparent
       border-radius 0
@@ -40,7 +39,7 @@ div[class*="language-"]
     width 100%
     line-height 1.4
     .highlighted
-      background-color rgba(0, 0, 0, 66%)
+      background-color $codeHighlightLineColor
   pre, pre[class*="language-"]
     background transparent
     position relative
@@ -93,7 +92,7 @@ div[class*="language-"]
           display block
           width $lineNumbersWrapperWidth
           height 100%
-          background-color rgba(0, 0, 0, 66%)
+          background-color $codeHighlightLineColor
     pre
       padding-left $lineNumbersWrapperWidth + 1 rem
       vertical-align middle
@@ -121,7 +120,7 @@ div[class*="language-"]
       width $lineNumbersWrapperWidth
       height 100%
       border-radius 6px 0 0 6px
-      border-right 1px solid rgba(0, 0, 0, 66%)
+      border-right 1px solid $codeHighlightLineColor
       background-color $codeBgColor
 
 

diff --git a/packages/theme-gungnir/styles/palette.styl b/packages/theme-gungnir/styles/palette.styl
@@ -36,7 +36,8 @@ $sidebarWidth = 18rem
 $catalogWidth = 14rem
 $mobileSidebarWidth = $sidebarWidth * 0.82
 
-$codeBgColor = #282c34
+$codeBgColor = #f5f2f0
+$codeHighlightLineColor = #b3d4fc
 
 $codeColor = rgba(27, 31, 35, 0.05)
 $codeColorDark = $darkColor3