Z's learning note

Search

SearchSearch

vnote

Feb 25, 2021, 3 min read

Vnote使用技巧

1. 配置文件

1.1. 从二级标题开始排序

  • Setting->Markdown->Heading sequence配置为enable，2。

1.2. MathJax的本地解析配置

  • 步骤： 在vnote的文件夹下新建一个plugin文件夹，将MathJax-3.0.1解压到文件夹下 在Setting->Markdown->MathJax configuration中配置： file:///.\plugin\MathJax-3.0.1\es5\tex-svg.js or, file:///home/YOUR_USERNAME/.config/vnote/plugin/MathJax-3.0.1/es5/tex-mml-chtml.js 好像是不能直接使用~省略home路径 新建一个note/或者打开一个note，在公式上点右键 math setting-> math renderer->SVG
    • 对于2.9.1版，不建议用新版本MathJax（3.0.5），不建议用CHMTL渲染

1.3. Graphviz的本地解析配置

  • 步骤： 在Setting->Markdown->Graphvizd executable中配置：.\plugin\Graphviz2.38\bin\dot.exe

1.4. 当前版本预览时内存泄漏问题

  • 关闭公式实时预览功能，否则会有内存占用问题。

2. 其它应用场景

  • 思维导图 可以用plantuml绘制思维导图github/issue

  • 图片打开的外部工具的配置 github/issue

  • 菜单排序： 在目录下点右键，sort，可以手动排序，也可以点name或time进行排序

3. 片段

  • 折叠内容
<details>
<summary>Title</summary>

Leave one empty line above. Your content here.
</details>
  • graphviz示例
```dot
digraph workflow{
    rankdir=TB; bgcolor="transparent";

    node [shape = box];
    1[label="111"];
    2[label="222"];
    1 -> 2 [label="333"];
}
```
  • HTML表格（暂时无法解析MathJax公式）
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
  • 带链接的图片
[![homepage](http://commonmark.org/help/images/favicon.png)](http://commonmark.org "Redirect to homepage")

4. 代码中高亮

  • 注意不能在<后直接接字符，否则会开始HTML标签解析
  • 换行用<br />代替

4.1. 使用谷歌的code prettify

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <pre>
    <code class="prettyprint">
 int foo (void) {
   <span style="background-color:yellow">int i;</span>
 }
 // Yay code and it has colors
    </code>
  </pre>
  • 效果
    
 int foo (void) {
   int i;
 }
 // Yay code and it has colors

4.2. 不使用外部代码

  • 代码
<pre><code>
int foo (void) {
<font color="#dd0000">int i;</font>
}
// Yay code and it has colors
</code></pre>
  • 效果

int foo (void) {
int i;
}
// Yay code and it has colors

4.3. 不使用外部代码，无浅灰色背景

  • 代码
<pre>
int foo (void) {
<font color="#dd0000">int i;</font>
}
// Yay code and it has colors
</pre>
  • 效果
int foo (void) {
int i;
}
// Yay code and it has colors

5. 引用，超链接与锚点

Markdown实现HTML实现
锚点（代码）X<span id = "def_ref">Define ref here</span> Content
锚点（效果）XDefine ref here Content
引用（代码）[go to Ref](#def_ref)<a href="#def_ref">go to Ref</a>
引用（效果）go to Refgo to Ref
  • 备注：HTML实现可用于HTML表格等标签内部

6. 折叠

<details>
<summary>Title</summary>
Leave one empty line above. Your content here.
</details>
Title Leave one empty line above. Your content here.

Backlinks