Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hankjs/obsidian-code-preview
Obsidian code block render by file path
https://github.com/hankjs/obsidian-code-preview
Last synced: 2 days ago
JSON representation
Obsidian code block render by file path
- Host: GitHub
- URL: https://github.com/hankjs/obsidian-code-preview
- Owner: hankjs
- License: mit
- Created: 2022-11-03T14:46:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-10T02:23:31.000Z (almost 2 years ago)
- Last Synced: 2024-10-20T16:02:54.474Z (19 days ago)
- Language: TypeScript
- Size: 206 KB
- Stars: 36
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-obsidian-zh - zjhcn/obsidian-code-preview
README
# Obsidian Code Previews Plugin
## 全部功能展示
具体示例可以直接使用 `Open folder as vault` 打开 [example.zip](https://github.com/zjhcn/obsidian-code-preview/releases/download/1.3.11/example-1.3.11.zip)。
### 路径
基本使用
代码块的语言默认使用文件的扩展名。
```preview
path: hello.js
```
相对路径
```preview
path: ./hello.js
```
绝对路径
绝对路径是以Vault的文件夹路径作为根目录的。
```preview
path: /sub/color.css
```
```preview
path: /hello.js
```
### 代码块语言
代码块的语言默认使用文件的扩展名。
语言配置属性: `language`、`lang`
language、lang
```preview
path: ./hello.js
lang: ts
```
```preview
path: ./hello.js
language: ts
```
### 选择显示的行范围
自定义开始或者结束的行
第三行到文件最后
```preview
path: /sub/color.css
start: 3
```
文件开头到第三行
```preview
path: /sub/color.css
end: 3
```
只显示第三行
```preview
path: /sub/color.css
start: 3
end: 3
```
指定显示范围
```preview
path: /sub/color.css
start: 2
end: 3
```
end 根据start增长
`end: "+1"`，这里面的`"`是必须的。
```preview
path: /sub/color.css
start: 2
end: "+1"
```
使用正则或者直接文本搜索
`/dd\d{2}/`
```preview
path: /sub/color.css
start: body
end: /dd\d{2}/
```
如果你不会正则，也可以直接使用文本搜索，例如：
`start: body`: 匹配 `body` 所在的行数
`end: dd00dd`: 匹配 `dd00dd` 所在的行数
```preview
path: /sub/color.css
start: body
end: dd00dd
```
### 高亮行
按行号高亮
```preview
path: /sub/color.css
highlight: 1
```
按行号范围高亮
```preview
path: /sub/color.css
highlight: 1-3
```
按文本搜索高亮
```preview
path: /sub/color.css
highlight: dd00dd
```
按正则搜索高亮
```preview
path: /sub/color.css
highlight: /dd\d{2}/
```
多个条件
多个条件使用 `,`隔开。
```preview
path: /sub/color.css
highlight: /dd\d{2}/, 1, body
```
也可以使用数组形式
```preview
path: /sub/color.css
highlight:
- /dd\d{2}/
- 1
- body
```
## 代码块YAML配置项
|配置 |说明 |类型 |默认值|
|---|---|---|---|
| path | 文件路径 | string | 必填 |
| start | 预览开始行数从1开始 | number or string or RegExp | - |
| end | 预览结束行数 | number or string or RegExp | - |
| highlight | 高亮的行 | number or string or RegExp | - |
| linenumber | 是否显示行号, 优先级大于插件配置 | true or false | 插件配置 |
## 插件配置
|配置 |说明 |类型 |默认值|
|---|---|---|---|
| watchAlias | 监听Alias文件夹变化，更新输入提示。可能有性能问题 | boolean | false |
| watchCode | 监听已经预览的代码文件，文件变更时更新渲染内容。可能有性能问题 | boolean | false |
| highLightColor | 高亮背景色 | css color | #2d82cc20 |
| include | 包含的路径，为空即包含全部 | `Array` | [] |
| exclude | 排除的路径 | `Array` | ["node_modules", ".obsidian"] |
| includeFile | 包含的文件, Required | `Array` | ["/\\.(j|t)s$/", "/\\.css$/"] |
| excludeFile | 排除的文件 | `Array` | [] |
| alias | 路径映射 | string \| Alias | code |
| linenumber | 是否显示行号 | true or false | true |
## Thank
linenumber, highlight 基于[obsidian-better-codeblock](https://github.com/stargrey/obsidian-better-codeblock)基础实现