dawy_go/vnote
1
0
Fork 0
mirror of https://gitee.com/vnotex/vnote.git synced 2025-07-05 13:59:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

add docs about themes

Browse Source
This commit is contained in:
Le Tan 2021-07-29 21:15:58 +08:00
parent 5461c71438
commit 5e35772cea
9 changed files with 239 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
en_us/docs/Users/Themes and Styles.md
View File

@ -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"
}
}
}
```

2
en_us/docs/Users/vx.json
View File

@ -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": [
]

2
en_us/index.md
View File

@ -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)!
:::

2
en_us/vx.json
View File

@ -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": [
]

12
vx_notebook/vx_notebook.json
View File

@ -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",

2
zh_cn/docs/用户/vx.json
View File

@ -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": [
]

109
zh_cn/docs/用户/主题和样式.md
View File

@ -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"
}
}
}
```

4
zh_cn/index.md
View File

@ -3,13 +3,13 @@
::: 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 [GitHub](https://github.com/vnotex/vnote)
- 聊聊 VNote [Slack](https://join.slack.com/t/vnote/shared_invite/enQtNDg2MzY0NDg3NzI4LTVhMzBlOTY0YzVhMmQyMTFmZDdhY2M3MDQxYTBjOTA2Y2IxOGRiZjg2NzdhMjkzYmUyY2VkMWJlZTNhMTQyODU)
- [Telegram](https://t.me/vnotex)

2
zh_cn/vx.json
View File

@ -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": [
]