File: README.md
VNote
A pleasant note-taking platform.
For more information, please visit VNote's Home Page.
Description
VNote is a Qt-based, free and open source note-taking application, focusing on Markdown now. VNote is designed to provide a pleasant note-taking platform with excellent editing experience.
VNote is NOT just a simple editor for Markdown. By providing notes management, VNote makes taking notes in Markdown simpler. In the future, VNote will support more formats besides Markdown.
Utilizing Qt, VNote could run on Linux, Windows, and macOS.
Downloads
Continuous builds on master branch could be found at the Continuous Build release.
Latest stable builds could be found at the latest release or Gitee release
Supports
- GitHub Issues;
- Email:
tamlokx at gmail.com;
Thank users who donated to VNote!
Development
After cloning the repository, run the initialization script to set up your development environment:
Linux/macOS:
bash scripts/init.shWindows:
scripts\init.cmdThis script will:
- Initialize and update all git submodules
- Install pre-commit hooks for automatic code formatting with clang-format
- Set up the vtextedit submodule pre-commit hook
For more development guidelines, see AGENTS.md.
License
VNote is licensed under GNU LGPLv3.
File: src/data/extra/docs/zh_CN/external_programs.md
外部程序
VNote支持通过在节点浏览器上下文菜单中的打开方式来调用外部程序打开笔记。
用户需要编辑会话配置(用户配置文件夹下的session.json文件)来添加自定义外部程序。一个例子如下:
{
"external_programs": [
{
"name" : "gvim",
"command" : "C:\\\"Program Files (x86)\"\\Vim\\vim80\\gvim.exe %1",
"shortcut" : "F4"
},
{
"name" : "notepad",
"command" : "notepad %1",
"shortcut" : ""
}
]
}一个外部程序可以包含3个属性:
name:该程序在VNote中的名字;command:当使用该外部程序打开笔记时执行的命令;- 使用
%1占位符,会被替换为真实的文件路径(自动加上双引号包裹);
- 使用
shortcut:分配给该外部程序的快捷键;
修改配置前请关闭VNote。
File: src/data/extra/docs/zh_CN/markdown_guide.md
Markdown指南
Markdown是一种轻量级的易用的书写语法。本文是Markdown的一个快速指南[^1]。
什么是Markdown?
Markdown是一种通过少量简单的标记字符来格式化文本的方法。您可以用纯文本来书写文档,然后在阅读时呈现一个美观的排版。
其实并没有一个标准的Markdown语法,很多编辑器都会添加自己的扩展语法。不同于此,为了兼容性,VNote仅仅支持那些被广泛使用的基本语法。
如何上手Markdown?
如果刚接触Markdown,那么比较好的一个方法是逐个学习Markdown语法。刚开始,懂得标题和强调语法就能够写出基本的文档;然后,每天可以学习一个新的语法并不断练习。
语法指南
下面是VNote支持的Markdown语法的一个概览。
标题
# This is a <h1> tag
## This is a <h2> tag
###### This is a <h6> tag注意:
#之后需要至少一个空格- 一个标题应该占一整行
强调
*This text will be italic*
_This text will be italic_
**This text will be bold**
__This text will be bold__注意:
- VNote推荐使用
* - 如果渲染错误,请尝试在第一个
*之前以及最后一个*之后添加一个空格。如果被标记的文本是以全角符号开始或结尾,一般都需要前后添加一个空格
列表
无序列表
* Item 1
只是一段在Item 1下面的文字。需要注意上面一行结尾有两个空格。
* Item 2
* Item 2a
* Item 2b
* Item 3
使用一个空行来来结束一个列表。有序列表
1. Item 1
1. Item 2
注意,列表前面的序号其实是无关紧要的,渲染时Markdown会自动修改该序号。
3. Item 3
1. Item 3a
2. Item 3b
4. Item 4表格
| col 1 | col 2 | col 3 |
| --- | --- | --- |
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |图片和链接
[Link Text](/url/of/the/link)注意:
- VNote不推荐使用参考式的图片链接。VNote不会预览这些图片。
块引用
As VNote suggests:
> VNote is the best Markdown note-taking application
> ever.
>
> THere is two spaces after `ever.` above to insert a
> new line.
It also suggests:
> VNote is good.
Here is another sentence within the quote.注意:
>标记后面需要至少一个空格- 多行连续的引用可以只在第一行添加标记
代码块
```lang
This is a fenced code block.
```
~~~
This is another fenced code block.
~~~注意:
lang用于指定代码块的代码语言,可选;如果不指定,VNote不会尝试高亮代码- 请访问Prism获取一个完整的支持语言列表
- 总是在一个代码块前面添加一个空行是一个不错的实践
图表
VNote支持使用以下引擎来绘制图表。您需要使用代码块,并标明特定语言,然后在代码块里面定义图表。
- Flowchart.js,语言为
flow或flowchart - Mermaid,语言为
mermaid - WaveDrom,数字时序图,语言为
wavedrom
例如,
```flowchart
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```UML
VNote支持PlantUML来实现UML图表。您需要使用代码块,并标明语言为puml,然后在代码块里面定义图表。
```puml
@startuml
Bob -> Alice : hello
@enduml
```Graphviz
VNote支持Graphviz来绘制图表。您需要使用代码块,并标明语言为dot,然后在代码块里面定义图表。
数学公式
VNote通过MathJax来支持数学公式。默认的公式块的分隔符是$$...$$,行内公式的分隔符是$...$。
- 行内公式不能跨多行
- 形如
3$abc$/$abc$4/$ abc$和$abc $的不会被解析为公式 - 使用
\转义$ - 开始的
$$之前以及结束的$$之后都只允许出现空格字符 - 在公式块中,使用
\\来换行
VNote也可以使用标明语言mathjax的代码块来实现公式块。
```mathjax
$$
J(\theta) = \frac 1 2 \sum_{i=1}^m (h_\theta(x^{(i)})-y^{(i)})^2
$$
```公式块支持公式序号:
$$vnote x markdown = awesome$$ (1.2.1)行内代码
Here is a `inline code`.如果想输入一个`,需要使用两个`来括住它,例如`` ` ``。要输入两个`,则需要使用三个`。
删除线
Here is a ~~text~~ with strikethrough.任务列表
* [x] this is a complete item.
* [ ] this is an incomplete item.脚注
This is a footnote [^1].
[^1]: Here is the detail of the footnote.上标和下标
This is the 1^st^ superscript.
This is the H~2~O subscript.标记
Let's mark the ==word==.警告
::: alert-info
这是一个信息文本。
:::
::: alert-danger
这是一个危险文本。
:::可用的一些警告形式如下:
alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark换行和段落
如果需要换行,您应该在当前行末尾添加两个空格,然后换行。VNote提供快捷键Shift+Enter来辅助用户输入两个空格并换行。
如果需要一个新的段落,您应该先插入一个空行然后才输入新的段落的文本。
一般来说,您应该在一个块元素(例如代码块、列表和块引用)后面插入一个空行来显式结束该元素。
[^1]: 该指南参考了Mastering Markdown。
File: src/data/extra/docs/zh_CN/shortcuts.md
快捷键
- 以下按键除特别说明外,都不区分大小写
- 在macOS下,
Ctrl对应于Command,在Vi模式下除外 - 按键序列
Ctrl+G, I表示先同时按下Ctrl和G,释放,然后按下I并释放 - 可以通过查看配置文件
vnotex.json来获取一个完整的最新的快捷键列表或者修改默认快捷键
通用
Ctrl+G, E
是否扩展内容区。Ctrl+Alt+N
在当前文件夹下新建笔记。Ctrl+F
页内查找和替换。Ctrl+Alt+F
高级查找。Ctrl+J/Ctrl+K
VNote的很多部件均支持Ctrl+J和Ctrl+K导航。Ctrl+Left, Mouse
任意滚动。Ctrl+Shift+T
恢复上一个关闭的文件。Ctrl+Alt+L
打开灵犀页。Ctrl+Alt+I
打开快速访问。Ctrl+G, X
关闭当前标签页。Ctrl+G, D
定位到当前笔记所在文件夹。Ctrl+G, O
打开大纲弹出窗口。
文本编辑器
Ctrl+S
保存当前更改。Ctrl+Wheel
鼠标滚轮实现放大/缩小页面。Ctrl+J/K
向下/向上滚动页面,不会改变光标。Ctrl+N/P
激活自动补全。Ctrl+N/P
浏览补全列表并插入当前补全。Ctrl+E
取消补全。Enter
插入补全。Ctrl+[或者Escape
结束补全。
文本编辑
Shift+Left,Shift+Right,Shift+Up,Shift+Down
扩展选定左右一个字符,或上下一行。Ctrl+Shift+Left,Ctrl+Shift+Right
扩展选定到单词开始或结尾。Ctrl+Shift+Up,Ctrl+Sfhit+Down
扩展选定到段尾或段首。Shift+Home,Shift+End
扩展选定到行首和行尾。Ctrl+Shift+Home,Ctrl+Shift+End
扩展选定到笔记开始或结尾处。Ctrl+Shift+G
跳转到指定行。Ctrl+C/X
在没有选中文本时复制/剪切整行。Ctrl+L
选择当前行。Alt+Up/Down
向上/向下移动行。Shift+Alt+Up/Down
向上/向下复制行。Ctrl+Shift+K
删除行。
Markdown 编辑器
阅读模式
H/J/K/L
导航,对应于左/下/上/右方向键。Ctrl+U
向上滚动半屏。Ctrl+D
向下滚动半屏。gg/G
跳转到笔记的开始或结尾。(区分大小写)。Ctrl + +/-
放大/缩小页面。Ctrl+Wheel
鼠标滚轮实现放大/缩小页面。Ctrl+0
恢复页面大小为100%。- 标题跳转
<N>[[:跳转到上N个标题<N>]]:跳转到下N个标题<N>[]:跳转到上N个同层级的标题<N>][:跳转到下N个同层级的标题<N>[{:跳转到上N个高一层级的标题<N>]}:跳转到下N个高一层级的标题
编辑模式
和文本编辑器共享一样的快捷键。
Ctrl+T
编辑当前笔记或者保存更改并退出编辑模式。Ctrl+G, Q
放弃当前更改并退出编辑模式。
文本编辑
Ctrl+B
插入粗体;再次按Ctrl+B退出。如果已经选择文本,则将当前选择文本加粗。Ctrl+I
插入斜体;再次按Ctrl+I退出。如果已经选择文本,则将当前选择文本改为斜体。Ctrl+;
插入行内代码;再次按Ctrl+;退出。如果已经选择文本,则将当前选择文本改为行内代码。Ctrl+'
插入代码块;再次按Ctrl+'退出。如果已经选择文本,则将当前选择文本嵌入到代码块中。Ctrl+.
插入公式;再次按Ctrl+.退出。如果已经选择文本,则将当前选择文本改为公式。Ctrl+G, .
插入公式块;再次按Ctrl+G, .退出。如果已经选择文本,则将当前选择文本改为公式块。Ctrl+/
插入表格。Ctrl+<Num>
插入级别为<Num>的标题。<Num>应该是1到6的一个数字。如果已经选择文本,则将当前选择文本改为标题。Ctrl+7
删除当前行或所选择文本的标题标记。Tab/Shift+Tab
增加或减小缩进。如果已经选择文本,则对所有选择的行进行缩进操作。Shift+Enter
插入两个空格然后换行,在Markdown中类似于软换行的概念。
展览模式
Ctrl+G, W会使VNote进入展览模式。该模式中,VNote会在一些主要部件中显示最多两个字母,按下这些字母可以跳转到对应的部件。
File: src/data/extra/docs/zh_CN/welcome.md
欢迎使用 VNote
一个舒适的笔记平台。
更多信息,请访问VNote主页。
常见问题
- 将鼠标悬停在按钮上可以获取详细信息。
- 如果更新后VNote崩溃,请删除用户配置文件夹中的
vnotex.json文件。 - VNote有着一系列强大的快捷键。请查看用户配置文件
vnotex.json以获取一个完整的快捷键列表或者修改默认快捷键。- 按键序列
Ctrl+G, I表示先同时按下Ctrl和G,释放,然后按下I并释放。
- 按键序列
- 使用中有任何问题,欢迎反馈。
Windows用户
- 如果VNote经常卡顿或无响应,或者界面异常,请检查OpenGL选项。详情。
File: src/data/extra/docs/en/external_programs.md
External Programs
VNote allows user to open notes with external programs via the Open With in the context menu of the node explorer.
To add custom external programs, user needs to edit the session configuration (the session.json file in user configuration folder). A sample may look like this:
{
"external_programs": [
{
"name" : "gvim",
"command" : "C:\\\"Program Files (x86)\"\\Vim\\vim80\\gvim.exe %1",
"shortcut" : "F4"
},
{
"name" : "notepad",
"command" : "notepad %1",
"shortcut" : ""
}
]
}An external program could have 3 properties:
name: the name of the program in VNote;command: the command to execute when opening notes with this external program;- Use
%1as a placeholder which will be replaced by the real file paths (automatically wrapped by double quotes);
- Use
shortcut: the shortcut assigned to this external program;
Close VNote before editting the session configuration.
File: src/data/extra/docs/en/markdown_guide.md
Markdown Guide
This is a quick guide [^1] for Markdown, a lightweight and easy-to-use syntax for writing.
What is Markdown?
Markdown is a way to style text via a few simple markers. You could write the document in plain text and then read it with a beautiful typesetting.
There is no standard Markdown syntax and many editors will support its own additional syntax. VNote supports only the widely-used basic syntax.
How to Use Markdown?
If you are new to Markdown, it is better to learn the syntax elements step by step. Knowing headers and emphasis is enough to survive. You could learn another new syntax and practise it every one or two days.
Syntax Guide
Here is an overview of Markdown syntax supported by VNote.
Headers
# This is a <h1> tag
## This is a <h2> tag
###### This is a <h6> tagNotes:
- At least one space is needed after the
# - A header should occupy one entire line
Emphasis
*This text will be italic*
_This text will be italic_
**This text will be bold**
__This text will be bold__Notes:
*is recommended in VNote- If the render failed, try to add an additional space before the first
*and after the last*. The space is necessary if the surrounded text begins or ends with full width punctuation
Lists
Unordered
* Item 1
This is a text under Item 1. Notice that there are two spaces at the end above.
* Item 2
* Item 2a
* Item 2b
* Item 3
To end a list, there should be one empty line above.Ordered
1. Item 1
1. Item 2
Notice that the sequence number is irrelevant. Markdown will change the sequence automatically when renderring.
3. Item 3
1. Item 3a
2. Item 3b
4. Item 4Tables
| col 1 | col 2 | col 3 |
| --- | --- | --- |
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |Images and Links
[Link Text](/url/of/the/link)Notes:
- It is not recommended to use image links in reference format. VNote will not preview those images.
Blockquotes
As VNote suggests:
> VNote is the best Markdown note-taking application
> ever.
>
> THere is two spaces after `ever.` above to insert a
> new line.
It also suggests:
> VNote is good.
Here is another sentence within the quote.Notes:
- Space is needed after the marker
> - You could just add only one
>at the first line
Fenced Code Block
```lang
This is a fenced code block.
```
~~~cpp
This is another fenced code block.
~~~Notes:
langis optional to specify the language of the code; if not specified, VNote won't highlight the code- For a detailed supported languages list, please visit Prism
- It is always a good practice to add one empty line before the whole fenced code block
Diagrams
VNote supports the following engines to draw diagrams. You should specify particular language of the fenced code block and write the definition of your diagram within it.
- Flowchart.js for flowchart with language
floworflowchart - Mermaid with language
mermaid - WaveDrom for digital timing diagram with language
wavedrom
For example,
```flowchart
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```UML
VNote supports PlantUML to draw UML diagrams. You should use puml specified as the language of the fenced code block and write the definition of your diagram within it.
```puml
@startuml
Bob -> Alice : hello
@enduml
```Graphviz
VNote supports Graphviz to draw diagrams. You should use dot specified as the language of the fenced code block and write the definition of your diagram within it.
Math Formulas
VNote supports math formulas via MathJax. The default math delimiters are $$...$$ for displayed mathematics, and $...$ for inline mathematics.
- Inline mathematics should not cross multiple lines
- Forms like
3$abc$,$abc$4,$ abc$, and$abc $will not be treated as mathematics - Use
\to escape$ - There should be only space chars before opening
$$and after closing$$ - Use
\\to new a line within a displayed mathematics
VNote also supports displayed mathematics via fenced code block with language mathjax specified.
```mathjax
$$
J(\theta) = \frac 1 2 \sum_{i=1}^m (h_\theta(x^{(i)})-y^{(i)})^2
$$
```Equation number of displayed mathematics is supported:
$$vnote x markdown = awesome$$ (1.2.1)Inline Code
Here is a `inline code`.To insert one `, you need to use two ` to enclose it, such as `` ` ``. To insert two `, you need to use three `.
Strikethrough
Here is a ~~text~~ with strikethrough.Task Lists
* [x] this is a complete item.
* [ ] this is an incomplete item.Footnote
This is a footnote [^1].
[^1]: Here is the detail of the footnote.Superscript and Subscript
This is the 1^st^ superscript.
This is the H~2~O subscript.Mark
Let's mark the ==word==.Alert
::: alert-info
This is an info text.
:::
::: alert-danger
This is a danger text.
:::Available variants:
alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-darkNew Line and Paragraph
If you want to enter a new line, you should add two spaces after current line and then continue your input. VNote provides Shift+Enter to help.
If you want to enter a new paragraph, you should add an empty line and then continue entering the new paragraph.
Generally, you need to add an empty line after a block element (such as code block, lists, blockquote) to explicitly end it.
[^1]: This guide references Mastering Markdown.
File: src/data/extra/docs/en/shortcuts.md
Shortcuts
- All the keys without special notice are case insensitive
- On macOS,
Ctrlcorresponds toCommandexcept in Vi mode - The key sequence
Ctrl+G, Imeans that first press bothCtrlandGsimultaneously, release them, then pressIand release - For a complete latest shortcuts list or modifying default shortcuts, please view the
vnotex.jsonconfiguration file
General
Ctrl+G, E
Toggle expanding the content area.Ctrl+Alt+N
Create a note in current folder.Ctrl+F
Find/Replace in current note.Ctrl+Alt+F
Advanced find.Ctrl+J/Ctrl+K
VNote supportsCtrl+JandCtrl+Kfor navigation in many widgets.Ctrl+Left Mouse
Scroll in all directions.Ctrl+Shift+T
Recover last closed file.Ctrl+Alt+L
Open Flash Page.Ctrl+Alt+I
Open Quick Access.Ctrl+G, X
Close current tab.Ctrl+G, D
Locate to the folder of current note.Ctrl+G, O
Open the Outline popup.
Text Editor
Ctrl+S
Save current changes.Ctrl+Wheel
Zoom in/out the page through the mouse scroll.Ctrl+J/K
Scroll page down/up without changing cursor.Ctrl+N/P
Activate auto-completion.Ctrl+N/P
Navigate through the completion list and insert current completion.Ctrl+E
Cancel completion.Enter
Insert current completion.Ctrl+[orEscape
Finish completion.
Text Editing
Shift+Left,Shift+Right,Shift+Up,Shift+Down
Expand the selection one character left or right, or one line up or down.Ctrl+Shift+Left,Ctrl+Shift+Right
Expand the selection to the beginning or end of current word.Ctrl+Shift+Up,Ctrl+Sfhit+Down
Expand the selection to the beginning or end of current paragraph.Shift+Home,Shift+End
Expand the selection to the beginning or end of current line.Ctrl+Shift+Home,Ctrl+Shift+End
Expand the selection to the beginning or end of current note.Ctrl+Shift+G
Go to line.Ctrl+C/X
Copy/Cut line if there is no selection.Ctrl+L
Select line.Alt+Up/Down
Move line up/down.Shift+Alt+Up/Down
Copy line up/down.Ctrl+Shift+K
Delete line.
Markdown Editor
Read Mode
H/J/K/L
Navigation, corresponding to Left/Down/Up/Right arrow keys.Ctrl+U
Scroll up half screen.Ctrl+D
Scroll down half screen.gg/G
Jump to the beginning or end of the note. (Case Sensitive).Ctrl+=/-
Zoom in/out the page.Ctrl+Wheel
Zoom in/out the page through the mouse scroll.Ctrl+0
Recover the page zoom factor to 100%.- Jump between titles
<N>[[: jump to previousNtitle<N>]]: jump to nextNtitle<N>[]: jump to previousNtitle at the same level<N>][: jump to nextNtitle at the same level<N>[{: jump to previousNtitle at a higher level<N>]}: jump to nextNtitle at a higher level
Edit Mode
Shares the same shortcuts with Text Editor.
Ctrl+T
Edit current note or save changes and exit edit mode.Ctrl+G, Q
Discard current changes and exit edit mode.
Text Editing
Ctrl+B
Insert bold. PressCtrl+Bagain to exit. Current selected text will be changed to bold if exists.Ctrl+I
Insert italic. PressCtrl+Iagain to exit. Current selected text will be changed to italic if exists.Ctrl+;
Insert inline code. PressCtrl+;again to exit. Current selected text will be changed to inline code if exists.Ctrl+'
Insert fenced code block. PressCtrl+'again to exit. Current selected text will be wrapped into a code block if exists.Ctrl+.
Insert inline math. PressCtrl+.again to exit. Current selected text will be changed to inline math if exists.Ctrl+G, .
Insert math block. PressCtrl+G, .again to exit. Current selected text will be changed to math block if exists.Ctrl+/
Insert table.Ctrl+<Num>
Insert title at level<Num>.<Num>should be 1 to 6. Current selected text will be changed to title if exists.Ctrl+7
Delete the title mark of current line or selected text.Tab/Shift+Tab
Increase or decrease the indentation. If any text is selected, the indentation will operate on all these selected lines.Shift+Enter
Insert two spaces followed by a new line, namely a soft linebreak in Markdown.
Navigation Mode
Ctrl+G, W will turn VNote into Navigation Mode. In this mode, VNote will display at most two characters on some major widgets, and then pressing corresponding characters will jump to that widget.
File: src/data/extra/docs/en/welcome.md
Welcome to VNote
A pleasant note-taking platform.
For more information, please visit VNote's Home Page.
FAQs
- Hover the mouse over buttons to get detailed information.
- If VNote crashes after update, please delete the
vnotex.jsonfile under user configuration folder. - VNote has a series of powerful shortcuts. Please view the user configuration file
vnotex.jsonfor a complete list of shortcuts or modifying default shortcuts.- The key sequence
Ctrl+G, Imeans that first press bothCtrlandGsimultaneously, release them, then pressIand release.
- The key sequence
- Feedbacks are appreciated! Please post an issue on GitHub if there is any.
Windows Users
- If VNote hangs frequently or behaves unexpectedly in interface, please check the OpenGL option. Check details here.
File: src/data/extra/themes/vx-idea/README.md
vnoteX idea theme
vx-idea主题又名石板灰,适用于新版本vnotex版本;vnote 2.0 版本请前往源仓库切换至 vnote 分支。
👉 尝鲜体验,请移步源仓库:https://gitee.com/uRick/vnote-idea-theme
1. 可选配置
1.1 适配2套代码高亮主题
详见主题目录 code_higlight 文件夹内容,因人而异,可根据需求参考官方自定义。
主题默认样式为highlight-one-light.css,当前提供:highlight-dark.css、highlight-one-light.css两款代码样式;主题样式基于仓库PrismJS Themes样式微调而来,具体支持语言样式请参考Prism.js。
使用主题时,请将code_highlight文件夹下样式,复制重命名替换主题根目录下highlight.css样式,重启Vnotex即可生效。
主题首选字体是YaHei Consolas Hybrid,可自行搜索下载安装。
highlight-dark.css #dark样式
highlight-one-light.css #light样式1.2 alert组件增强
基于
vnotex原生alert组件支持,引入图标增强,主要为编写技术文档适配,当前不支持alert-light、alert-success。
效果如下:
复制 tips_components/style.css 中样式然后追加至 web.css 文件尾即可。
2. 预览
(Theme preview image removed)