特色功能

todo#h1

• canvas support
• broken-link or file css
• keyborad
• image modal , 任意图片的弹窗放大

2024-11-29 15:35:02#h1

excalidraw svg图片嵌入和缩放#h2

• tips: obsdian excalildraw插件中设置自动保存为svg格式的图片, 更方便一些
• 语法可以直接使用 ![[xxx.svg]] 这种写法

mermaid 拖拽#h2

• 基于 rehype-mermaid实现的插件, 支持常用的mermaid功能
• 使用mermaid标准语法即可，支持复制mermaid代码

2024-11-27 16:09:57#h1

代码高亮插件#h2

• 替换为 expressive-code 代码语法高亮插件
  • 暂不支持ignore某些language, 使用中会和mermaid语法冲突，导致mermaid无法渲染
• 该高亮插件语法相比quartz内置的rehype-pretty-code更为丰富, 可以实现和obsidian中的 shiki-highlighter 插件一致的高亮效果

demo#h3

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Collapsible Block

5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  return a + b
15
}

Here is a code sample:

Terminal window

1
pwd
2

3
---
4
After pressing enter, the `pwd` command will output the current directory
5
your terminal is in.
6
---

1
// Example with wrap
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with wrap=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

line-markers.js

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

labeled-line-markers.jsx

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

labeled-line-markers.jsx

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

1
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line