VSCode Notebook 使用一下方式搭建。

效果截图

Markdown预览

Markdown表格自动格式化

Draw.io 流程图

思维导图

基础搭建方式

VSCode（编辑器） + 坚果云（多终端）

需要准备一个坚果云账户，在电脑上建立一个坚果云同步文件夹。然后设置其为 VSCode 的工作目录。

然后就可以愉快地写笔记、同步笔记了！

当前搭配组合及效果

效果：可以打开 .md（markdown），.pdf，.dio（流程图），.km（思维导图）。

THEME: 安装并启用 Office Theme (Publisher)
LINT: 安装并启用 markdownlint
Markdown Preview Enhanced Settings:
- 安装并启用后进入设置，配置为以下设置：
  - Preview Theme: vue.css
  - Code Block Theme: vue.css
  - CSS Customization: 参考下方的代码块（具体可参考）
Editor: 设置工作区的 Tab Size 为 2

CSS Customization:

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  background-color: #f3f3f3;
  code:before {content: '\00a0'}
  code:after {content: '\00a0'}
  pre[data-role="codeBlock"] {
    background-color: rgb(255, 253, 250);
  }
  pre[data-role="codeBlock"]:before {
    background-color: rgb(255, 253, 250);
    color: #b1b1b1;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 5px;
    position: absolute;
    right: 28px;
  }
  pre[data-role="codeBlock"].language-python:before {content: 'Python'}
  pre[data-role="codeBlock"].language-php:before {content: 'PHP'}
  pre[data-role="codeBlock"].language-sql:before {content: 'SQL'}
  pre[data-role="codeBlock"].language-javascript:before {content: 'JavaScript'}
  pre[data-role="codeBlock"].language-sass:before {content: 'SASS'}
  pre[data-role="codeBlock"].language-scss:before {content: 'SCSS'}
  pre[data-role="codeBlock"].language-css:before {content: 'CSS'}
  pre[data-role="codeBlock"].language-html:before {content: 'HTML'}
  pre[data-role="codeBlock"].language-xml:before {content: 'XML'}
  pre[data-role="codeBlock"].language-bash:before {content: 'Shell'}
  pre[data-role="codeBlock"].language-shell:before {content: 'Shell'}
  pre[data-role="codeBlock"].language-text:before {content: 'Text'}
}

使用的插件及配置

以下插件都是在配置笔记本的过程中可以组合使用的，可随自己的意思下载安装并使用。使用方法和样式参考各自的 VS Marketplace 的页面内容。

功能插件

Markdown Preview Enhanced

Id: shd101wyy.markdown-preview-enhanced
Description: Markdown Preview Enhanced ported to vscode
Version: 0.5.13
Publisher: Yiyi Wang
VS Marketplace Link: Link

Back & Forth

Id: nick-rudenko.back-n-forth
Description: Adds go back/forward buttons for easier navigation
Version: 3.0.3
Publisher: Nick Rudenko
VS Marketplace Link: Link

Draw.io Integration

Id: hediet.vscode-drawio
Description: This unofficial extension integrates Draw.io into VS Code.
Version: 0.7.2
Publisher: Henning Dieterichs
VS Marketplace Link: Link

TODO Highlight

Id: wayou.vscode-todo-highlight
Description: highlight TODOs, FIXMEs, and any keywords, annotations…
Version: 1.0.4
Publisher: Wayou Liu
VS Marketplace Link: Link

Todo Tree

Id: gruntfuggly.todo-tree
Description: Show TODO, FIXME, etc. comment tags in a tree view
Version: 0.0.178
Publisher: Gruntfuggly
VS Marketplace Link: Link

markdownlint

Id: davidanson.vscode-markdownlint
Description: Markdown linting and style checking for Visual Studio Code
Version: 0.36.3
Publisher: David Anson
VS Marketplace Link: Link

vscode-pdf

Id: tomoki1207.pdf
Description: Display pdf file in VSCode.
Version: 1.1.0
Publisher: tomoki1207
VS Marketplace Link: Link

vscode-mindmap

Id: souche.vscode-mindmap
Description: mindmap for vscode
Version: 0.0.5
Publisher: Souche
VS Marketplace Link: Link

Paste Image

Id: mushan.vscode-paste-image
Description: paste image from clipboard directly
Version: 1.0.4
Publisher: mushan
VS Marketplace Link: Link

配置

Paste Image: Base Path -> ${currentFileDir}
Paste Image: Path -> ${currentFileDir}\assets

使用

复制图片或使用微信 Alt + A 截图
Ctrl + Alt + V 粘贴到 MD 文件中

样式插件

Atom One Dark Theme

Id: akamud.vscode-theme-onedark
Description: One Dark Theme based on Atom
Version: 2.2.2
Publisher: Mahmoud Ali
VS Marketplace Link: Link

Ayu

Id: teabyii.ayu
Description: A simple theme with bright colors and comes in three versions — dark, light and mirage for all day long comfortable work.
Version: 0.20.1
Publisher: teabyii
VS Marketplace Link: Link

Community Material Theme

Id: equinusocio.vsc-community-material-theme
Description: The official community maintained Material Theme with ‘legacy’ color schemes you love!
Version: 1.4.2
Publisher: Mattia Astorino
VS Marketplace Link: Link