diff --git a/en_us/docs/Users/Themes and Styles.md b/en_us/docs/Users/Themes and Styles.md index fd2b0d81..67a9322d 100644 --- a/en_us/docs/Users/Themes and Styles.md +++ b/en_us/docs/Users/Themes and Styles.md @@ -17,3 +17,112 @@ Some key files of a theme: - `text-editor.theme`: theme file of the text editor (as well as Markdown editor); - `web.css`: style sheet file of the read mode of Markdown; - `highlight.css`: style sheet file of the read mode of Markdown for code block syntax highlight; VNote uses [Prism](https://prismjs.com/) for syntax highlight in read mode; + +## Samples +### Custom Fonts +#### Read Mode +For the font in **read mode**, it is specified in `web.css` by the `font-family` and `font-size`. + +Styles of the body: + +```css +body { + margin: 0 auto; + font-family: -apple-system, "Noto Sans", "Helvetica Neue", "Segoe UI", Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "YaHei Consolas Hybrid", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体", "Apple Color Emoji", "Segoe UI Emoji"; + color: #222222; + line-height: 1.5; + padding: 16px; + background-color: #f5f5f5; + font-size: 16px; +} +``` + +Styles of the code blocks and inline code: + +```css +code { + font-family: "YaHei Consolas Hybrid", Consolas, Monaco, Monospace, Courier; + color: #8e24aa; + word-break: break-word; +} + +pre code { + display: block; + padding-left: 0.5em; + padding-right: 0.5em; + color: #222222; + background-color: #e0e0e0; + line-height: 1.5; + font-family: "YaHei Consolas Hybrid", Consolas, Monaco, Monospace, Courier; + white-space: pre; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} +``` + +For code blocks with syntax highlight, styles are defined in `highlight.css`: + +```css +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +``` + +#### Text Editor and Markdown Editor +For the font of text editor and Markdown editor, it is specified in `text-editor.theme` file. + +Text editor: + +```json +{ + "editor-styles" : { + "Text" : { + "//comment" : "Support a list of fonts separated by ,", + "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New", + "font-size" : 12, + "text-color" : "#222222", + "background-color" : "#f5f5f5", + "selected-text-color" : "#f5f5f5", + "selected-background-color" : "#1976d2" + } + } +} +``` + +Markdown editor: + +```json +{ + "markdown-editor-styles" : { + "Text" : { + "//comment" : "Support a list of fonts separated by ,", + "font-family" : "冬青黑体, YaHei Consolas Hybrid, Microsoft YaHei, 微软雅黑, Microsoft YaHei UI, WenQuanYi Micro Hei, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, Liberation Sans, Droid Sans, NSimSun, 新宋体, SimSun, 宋体, Verdana, Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Times New Roman", + "font-size" : 12, + "text-color" : "#222222", + "background-color" : "#f5f5f5", + "selected-text-color" : "#f5f5f5", + "selected-background-color" : "#1976d2" + } + } +} +``` \ No newline at end of file diff --git a/en_us/docs/Users/vx.json b/en_us/docs/Users/vx.json index ff6e34ff..6e7e2dd2 100644 --- a/en_us/docs/Users/vx.json +++ b/en_us/docs/Users/vx.json @@ -68,7 +68,7 @@ "attachment_folder": "", "created_time": "2018-11-24T12:18:17Z", "id": "0", - "modified_time": "2021-07-13T01:36:34Z", + "modified_time": "2021-07-29T13:14:53Z", "name": "Themes and Styles.md", "tags": [ ] diff --git a/en_us/index.md b/en_us/index.md index 76a8e890..6baeb69d 100644 --- a/en_us/index.md +++ b/en_us/index.md @@ -3,7 +3,7 @@ ::: alert-success -VNote 3.4.0 is released! Check out [what's new](https://github.com/vnotex/vnote/releases)! +VNote 3.5.1 is released! Check out [what's new](https://github.com/vnotex/vnote/releases)! ::: diff --git a/en_us/vx.json b/en_us/vx.json index dedc5199..1da70f61 100644 --- a/en_us/vx.json +++ b/en_us/vx.json @@ -5,7 +5,7 @@ "attachment_folder": "", "created_time": "2018-11-24T05:04:27Z", "id": "0", - "modified_time": "2021-07-10T01:53:51Z", + "modified_time": "2021-07-29T12:33:37Z", "name": "index.md", "tags": [ ] diff --git a/vx_notebook/vx_notebook.json b/vx_notebook/vx_notebook.json index f2ead70b..a0e6abb6 100644 --- a/vx_notebook/vx_notebook.json +++ b/vx_notebook/vx_notebook.json @@ -3,6 +3,18 @@ "config_mgr": "vx.vnotex", "created_time": "2018-11-24T05:00:58Z", "description": "", + "history": [ + { + "last_accessed_time": "2021-07-29T13:15:45Z", + "line_number": -1, + "path": "zh_cn/docs/用户/主题和样式.md" + }, + { + "last_accessed_time": "2021-07-29T13:15:46Z", + "line_number": -1, + "path": "en_us/docs/Users/Themes and Styles.md" + } + ], "image_folder": "vx_images", "name": "vnote-docs", "next_node_id": "3", diff --git a/zh_cn/docs/用户/vx.json b/zh_cn/docs/用户/vx.json index eeb2116e..a7066aa2 100644 --- a/zh_cn/docs/用户/vx.json +++ b/zh_cn/docs/用户/vx.json @@ -68,7 +68,7 @@ "attachment_folder": "", "created_time": "2018-11-24T12:30:05Z", "id": "0", - "modified_time": "2021-07-13T11:28:14Z", + "modified_time": "2021-07-29T13:15:36Z", "name": "主题和样式.md", "tags": [ ] diff --git a/zh_cn/docs/用户/主题和样式.md b/zh_cn/docs/用户/主题和样式.md index 06a5a71d..d0961ae3 100644 --- a/zh_cn/docs/用户/主题和样式.md +++ b/zh_cn/docs/用户/主题和样式.md @@ -17,3 +17,112 @@ - `text-editor.theme`: 文本编辑器（以及 Markdown 编辑器）的主题文件； - `web.css`: Markdown 阅读模式的样式文件； - `highlight.css`: Markdown 阅读模式的代码块语法高亮样式文件；VNote 在阅读模式使用 [Prism](https://prismjs.com/) 来进行语法高亮; + +## 示例 +### 自定义字体 +#### 阅读模式 +**阅读模式**的字体定义在文件 `web.css` 的 `font-family` 和 `font-size` 中。 + +正文的样式： + +```css +body { + margin: 0 auto; + font-family: -apple-system, "Noto Sans", "Helvetica Neue", "Segoe UI", Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "YaHei Consolas Hybrid", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体", "Apple Color Emoji", "Segoe UI Emoji"; + color: #222222; + line-height: 1.5; + padding: 16px; + background-color: #f5f5f5; + font-size: 16px; +} +``` + +代码块和行内代码的样式： + +```css +code { + font-family: "YaHei Consolas Hybrid", Consolas, Monaco, Monospace, Courier; + color: #8e24aa; + word-break: break-word; +} + +pre code { + display: block; + padding-left: 0.5em; + padding-right: 0.5em; + color: #222222; + background-color: #e0e0e0; + line-height: 1.5; + font-family: "YaHei Consolas Hybrid", Consolas, Monaco, Monospace, Courier; + white-space: pre; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} +``` + +对于有语法高亮的代码块，其样式定义在文件 `highlight.css` 中： + +```css +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +``` + +#### 文本编辑器和 Markdown 编辑器 +文本编辑器和 Markdown 编辑器的字体定义在 `text-editor.theme` 文件。 + +文本编辑器： + +```json +{ + "editor-styles" : { + "Text" : { + "//comment" : "Support a list of fonts separated by ,", + "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New", + "font-size" : 12, + "text-color" : "#222222", + "background-color" : "#f5f5f5", + "selected-text-color" : "#f5f5f5", + "selected-background-color" : "#1976d2" + } + } +} +``` + +Markdown 编辑器： + +```json +{ + "markdown-editor-styles" : { + "Text" : { + "//comment" : "Support a list of fonts separated by ,", + "font-family" : "冬青黑体, YaHei Consolas Hybrid, Microsoft YaHei, 微软雅黑, Microsoft YaHei UI, WenQuanYi Micro Hei, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, Liberation Sans, Droid Sans, NSimSun, 新宋体, SimSun, 宋体, Verdana, Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Times New Roman", + "font-size" : 12, + "text-color" : "#222222", + "background-color" : "#f5f5f5", + "selected-text-color" : "#f5f5f5", + "selected-background-color" : "#1976d2" + } + } +} +``` \ No newline at end of file diff --git a/zh_cn/index.md b/zh_cn/index.md index 980981bc..d15e5ab7 100644 --- a/zh_cn/index.md +++ b/zh_cn/index.md @@ -3,20 +3,20 @@ ::: alert-success -VNote 3.4.0 已发布！ 看看都有 [哪些更新](https://github.com/vnotex/vnote/releases) ！ +VNote 3.5.1 已发布！ 看看都有[哪些更新](https://github.com/vnotex/vnote/releases) ！ 观看[展示录屏](https://www.bilibili.com/video/av77455284) ！ ::: -- 加入VNote [GitHub](https://github.com/vnotex/vnote) -- 聊聊VNote [Slack](https://join.slack.com/t/vnote/shared_invite/enQtNDg2MzY0NDg3NzI4LTVhMzBlOTY0YzVhMmQyMTFmZDdhY2M3MDQxYTBjOTA2Y2IxOGRiZjg2NzdhMjkzYmUyY2VkMWJlZTNhMTQyODU) +- 参与 VNote [GitHub](https://github.com/vnotex/vnote) +- 聊聊 VNote [Slack](https://join.slack.com/t/vnote/shared_invite/enQtNDg2MzY0NDg3NzI4LTVhMzBlOTY0YzVhMmQyMTFmZDdhY2M3MDQxYTBjOTA2Y2IxOGRiZjg2NzdhMjkzYmUyY2VkMWJlZTNhMTQyODU) - [Telegram](https://t.me/vnotex) ## 开源和自由 - 遵从 [GNU LGPLv3](https://opensource.org/licenses/LGPL-3.0) 开源协议 - 由 Qt 和 C++ 提供强劲性能 -- 支持主流操作系统 Linux，Windows，和macOS +- 支持主流操作系统 Linux，Windows，和 macOS ![](_v_images/20181124154422086_1815676907.svg =512x) diff --git a/zh_cn/vx.json b/zh_cn/vx.json index d3bf5f30..b9598c7b 100644 --- a/zh_cn/vx.json +++ b/zh_cn/vx.json @@ -23,7 +23,7 @@ "attachment_folder": "", "created_time": "2018-11-24T09:30:11Z", "id": "0", - "modified_time": "2021-07-10T02:29:51Z", + "modified_time": "2021-07-29T12:33:19Z", "name": "index.md", "tags": [ ]