Skip to content

Latest commit

 

History

History
577 lines (453 loc) · 19 KB

FEATURES_ZH-CN.md

File metadata and controls

577 lines (453 loc) · 19 KB
headingNumber enableMacro customVar define
true
true
Hello
--APP_NAME-- --APP_VERSION--
Yank Note
[= $ctx.version =]

Yank-Note 特色功能使用说明

English | 中文

[toc]{type: "ol", level: [2]}

应用数据

应用相关的数据目录存放在 <home>/yank-note 下面,点击托盘菜单“打开主目录”接口即可查看

目录说明:

  1. 配置文件 <home>/yank-note/config.json
  2. 回收站 <home>/yank-note/trash
  3. 插件 <home>/yank-note/plugins
  4. 主题 <home>/yank-note/themes

TOC 生成

需要生成目录的地方写入 [toc]{type: "ul", level: [1,2,3]} 可以控制目录样式 ulol 和级别

待办切换

在预览界面打勾试试

  • 2021-06-06 10:27 TEST1
  • 2021-06-06 10:27 TEST2
  • 2021-06-06 10:27 TEST3

加密文档

  1. .c.md 结尾的文档视为加密文档,可以用来保存机密的信息。
  2. 加密和解密过程均在前端完成。
  3. 请务必保管好文档密码,密码一旦丢失就只能自己暴力破解了。

Markdown 增强

在编辑器中键入 / 可以获得提示

  • 高亮:==marked==
  • 上标:29^th^
  • 下标:H20
  • 脚注:脚注1语法2

元素属性书写

此功能使用 markdown-it-attrs 实现 示例红色文字: test{style="color:red"}

图片增强

  1. 图片默认会渲染成块元素并居中,背景色透明

    • 如果要显示为行内元素,可以在图片链接参数后面追加 .inline 如:
    • 如果要给图片添加白色背景优化展示效果(针对某些透明图片),可以在图片链接参数后面追加 .bgw 如:
  2. 可以使用markdown-it-imsize的方式来设置图片尺寸 例如这是一个宽度为 16px 的图片: ![](logo-small.png?.inline =16x)

思维导图

只需要在列表根节点加上 {.mindmap} 即可。

  • 中心节点{.mindmap}
    • [1] 状态可见原则
    • [2] 环境贴切原则
    • [3] 用户可控原则
    • [4] 一致性原则
    • [5] 防错原则
    • [6] 易取原则
    • [7] 灵活高效原则
    • [8] 优美且简约原则
    • [9] 容错原则
    • [10] 人性化帮助原则

脑图使用 kityminder-core 实现。

Mermaid 图形

graph LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Loading
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Loading
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
Loading
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Loading
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Loading
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
Loading

Plantuml 图形

系统需要有 Java 环境,并安装有 graphviz 示例如下

@startuml a -> b @enduml

表格增强

此功能使用 markdown-it-multimd-table 实现 支持在表格中使用多行文本和列表。支持表格说明渲染

您可以双击/右键单元格快捷编辑单元格内容

First header Second header
List: More \
  • over | data \
  • several | Test | Test [测试表格]
First header Second header
AAAAAAAAAAAA BBBBBBBBBBBBBB
AAAAAAAAAAAA BBBBBBBBBBBBBB
AAAAAAAAAAAA BBBBBBBBBBBBBB
AAAAAAAAAAAA BBBBBBBBBBBBBB
AAAAAAAAAAAA BBBBBBBBBBBBBB
Test Test
[小尺寸表格]
{.small}

Katex 公式

此功能由 markdown-it-katex 插件提供

$$\begin{array}{c} \nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}$$

equation description
$\nabla \cdot \vec{\mathbf{B}} = 0$ divergence of $\vec{\mathbf{B}}$ is zero
$\nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$
$\nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ what?

运行代码

支持运行 JavaScript PHP nodejs Python bash bat 代码。 此功能执行外部命令实现,所以需要安装相应环境。

代码块第一行需要包含以 --run-- 字符串,示例如下

// --run--
await new Promise(r => setTimeout(r, 500))
ctx.ui.useToast().show("info", "HELLOWORLD!")
console.log('HELLOWORD')
// --run--
console.log('HELLOWORD')
// --run--
echo 'HELLOWORD!';
# --run--
print('HELLOWORD')
# --run--
date
REM --run--
@echo HELLOWORD

集成终端

  1. 使用 Alt/Option + T 或者点击状态栏 切换终端 菜单唤起集成终端
  2. 支持在编辑器中选中一段代码后按下 Shift + Alt/Option + R 直接在终端中运行命令。免去复制粘贴。
  3. 切换内置终端工作目录到当前目录 右键目录

小工具

支持在文档中嵌入 HTML 小工具。 HTML 代码块第一行需要包含以 --applet-- 字符串,其余字符串作为小工具标题,示例如下

<!-- --applet-- Hash -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'md5':
            output.value = ctx.lib.cryptojs.MD5(input.value).toString().toLowerCase()
            break
        case 'sha1':
            output.value = ctx.lib.cryptojs.SHA1(input.value).toString().toLowerCase()
            break
        case 'sha256':
            output.value = ctx.lib.cryptojs.SHA256(input.value).toString().toLowerCase()
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    输入
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('md5')">MD5</button>
    <button onclick="run('sha1')">SHA1</button>
    <button onclick="run('sha256')">SHA256</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
    <button onclick="var x = document.getElementById('output'); x.value = x.value.toUpperCase()">结果大写</button>
</div>

如果没有标题,将没有外部边框装饰

<!-- --applet--  -->
<button onclick="ctx.ui.useToast().show(`info`, `HELLOWORLD!`)">HELLO</button>

ECharts 图形

Js 代码块第一行包含以 --echarts-- 字符串会被解析成 ECharts 图形,示例如下

// --echarts--
function (chart) {
chart.setOption({
    // backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#888'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:274, name:'联盟广告'},
                {value:235, name:'视频广告'},
                {value:400, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: '#888'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#888'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
})
}

Draw.io 图形

嵌入 xml

xml 代码块 第一行注释需要有 --drawio-- 文字

<!-- --drawio-- -->
<mxfile modified="2019-08-08T10:12:50.344Z" host="" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.master/1.1.2 Chrome/76.0.3809.88 Electron/6.0.0 Safari/537.36" etag="Sj0MCp6T4t3TRFXfBnGH" version="11.1.1" type="device"><diagram name="Page-1" id="c7558073-3199-34d8-9f00-42111426c3f3">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</diagram></mxfile>

嵌入本地 drawio 文件

链接属性 link-type 值需要是 drawio 字符串。使用链接的形式也不会影响其他 Markdown 解析器解析。

[drawio](./test.drawio){link-type="drawio"}

Luckysheet 表格

链接属性 link-type 值需要是 luckysheet 字符串。使用链接的形式也不会影响其他 Markdown 解析器解析。

[luckysheet](./test.luckysheet){link-type="luckysheet"}

容器块

支持类似 VuePress 容器块 功能,使用 markdown-it-container 实现

使用

::: <type> [title]
[content]
:::

type 是必需的, titlecontent 是可选的。

支持的 type 有:tip warning danger details group group-item

示例

::: tip 这是一个提示 :::

::: warning 这是一个警告 :::

::: danger 这是一个危险警告 :::

::: danger STOP 危险区域,禁止通行 :::

::: details 这是一个 details 标签 :::

::: details 点击展开更多 这是一个 details 标签 :::

:::: group 这是标签组

::: group-item Tab 1 test 1 :::

::: group-item *Tab 2 test 2 标题前带 * 表示默认激活此选项卡 :::

::: group-item Tab 3 test 3 :::

::::

Front Matter

页面支持类似 Jekyll Front Matter 配置信息

内置变量

变量名 类型 描述
headingNumber boolean 是否开启页面标题序号编号
enableMacro boolean 是否开启宏替换
define Record<string, string> 宏定义,定义文本替换

文本替换

define 字段可以定义一些文本替换映射。支持在另一个文件定义,支持宏表达式。具体可参考本文件顶部 Front Matter 部分。

  • 应用名: --APP_NAME--
  • 应用版本: --APP_VERSION--
  • 另一个文件的定义: --TEST_DEFINE--

宏替换

高级版可用

Yank Note 允许你在页面中嵌入宏,用以动态的替换文档。

使用

使用前需要先在 Front Matter 开启宏替换,定义 enableMacro: true

[= <expression> =]

其中 expression 是需要执行的 js 表达式,支持 await/Promise 异步表达式。

如果表达式中需要包含 [= 或 =] 请输入 [\==\] 转义替换

一些示例

  • 是否开启页面标题序号编号: [= headingNumber =]
  • 使用变量: [= customVar =]
  • 定义变量: [= $export('testVar', 'Test') =][= testVar =]
  • 应用版本:[= $ctx.version =]
  • 当前文档名: [= $doc.basename =]
  • 当前时间: [= $ctx.lib.dayjs().format('YYYY-MM-DD HH:mm') =]
  • 限定符转义: [= '[= =]' =]
  • 四则运算: [= (1 + 2) / 2 =]
  • 引用文件(支持最多嵌套 3 层,可使用目标文档中定义的 Front Matter 变量)

    [= $include('./_FRAGMENT.md', true) =]

  • 被引用文档中定义的变量:[= customVarFromOtherDoc =]
  • 你的 IP 地址:[= fetch('https://ifconfig.me/ip').then(r => r.text()) =]
  • 天气预报
    [= await ctx.utils.sleep(1000), fetch('https://wttr.in?0AT').then(r => r.text()) =]
    
  • 九九乘法表 [= (function nine (num) { let res = '' for (let i = 1; i <= num; i++) { let str = ''; for (let k = 1; k <= num; k++) { if (i >= k) { str += k + 'x' + i + '=' + i*k + ' '; } } res = res + str + '\n' } return res })(9) =]

可用变量

宏代码可以使用在 Front Matter 定义的变量,也可以使用下面的内置变量

变量名 类型 描述
$ctx object 编辑器 ctx,可参考插件开发指南Api 文档
$include (path: string, trim = false) => Result 引入其他文档片段方法
$export (key: string, val: any) => Result 定义一个本文档可以使用的变量
$noop () => Result 无操作函数,可用于文本占位使用
$doc object 当前文档信息
$doc.basename string 当前文档文件名(无后缀)
$doc.name string 当前文档文件名
$doc.path string 当前文档路径
$doc.repo string 当前文档仓库
$doc.content string 当前文档内容
$doc.status 'loaded', 'save-failed', 'saved' 当前文档状态

命令行参数

在向别人交接文档的时候,可以使用脚本,自定义命令行参数启动程序,方便对方查看文档。

名称 作用 默认值 说明 示例
--port 服务器监听端口 3044 端口 --port=8080
--disable-tray 禁用常驻托盘 false true/false --disable-tray
--readonly 编辑器只读 false true/false --readonly
--show-status-bar 显示状态栏 true true/false --show-status-bar=false
--data-dir 数据目录 目录路径字符串 --data-dir='./.data'
--init-repo 初始仓库名 字符串 --init-repo='test'
--init-file 加载文件路径 文件路径,相对于仓库路径 --init-file='/1.md'

自定义样式

  1. 右键点击托盘图标,点击“打开主目录”,进入 <主目录>/themes 目录。
  2. 复制 github.css 为一个新 CSS 文件,修改 CSS 内容
  3. 打开设置 => 外观 => 自定义 CSS 切换 CSS 配置

插件开发

请参考插件开发指南

Footnotes

  1. 这是一个脚注

  2. 这也是一个脚注