【Obsidian技巧分享】使用Prettier格式化Obsidian笔记中的代码块

在使用 Obsidian 记录和整理笔记时,保持笔记格式的一致性和整洁性至关重要。Linter 插件是进行格式化的实用工具,但它无法处理笔记中的代码块。为了解决这个问题,我发现可以在 VScode 中使用 Prettier 来格式化 Markdown 文件可以格式化其中的代码块。

为了更好地在 Obsidian 中使用这种功能,我编写了一个 QuickAdd 脚本,使其能够与 Linter 配合使用。这样不仅可以格式化 Markdown 的整体格式,还能格式化其中的代码块。

配置 Prettier 格式化

以下是使用 Prettier 格式化 Obsidian 笔记的步骤:

  1. 安装 Node.js 和 npm:Prettier 是一个基于 Node.js 的工具,因此你需要先安装 Node.js 和 npm(Node.js 的包管理器)。可以从 Node.js 官网 下载并安装。
    大部分应该自带的有,检测是否已安装,在终端输入下面的代码:

    node -v
    

    如果 Node.js 已安装,该命令会返回 Node.js 的版本号

  2. 安装 Prettier:在命令行中运行以下命令来全局安装 Prettier:

    npm install --global prettier
    
  3. 格式化文件:在终端使用 Prettier 命令格式化你的 Markdown 文件。

例如,如果你的 Obsidian 笔记路径为 D:\PandaNotes\600【草稿】Draft\【Draft】24.12.03_054928.md,运行以下命令即可格式化此文档:

prettier --write --semi=true "D:\PandaNotes\600【草稿】Draft\【Draft】24.12.03_054928.md"

其中,--semi=true 表示在格式化的代码中添加分号,在处理 JavaScript、TypeScript 等语言的代码块时,这个选项将确保语句末尾都有分号。

Prettier 格式化的作用

  1. 列表格式化:它可以标准化列表的格式,包括有序和无序列表的缩进、符号(如 -*)、和编号格式。
  2. 代码块格式化:在 Markdown 中的代码块可以根据指定的语言进行格式化,使得代码块内部的代码更加易读。
  3. 表格对齐:Prettier 可以自动对齐 Markdown 表格中的内容,使得表格更加美观和易于阅读。
  4. 标题格式化:确保标题符号(如 #)与标题文本之间有一个空格,并且多余的空格被移除。
  5. 去除多余空白:删除行尾的多余空白字符,保持文档的整洁。
  6. 引用块格式化:统一引用块的格式,使得文档中的引用部分更加一致。

注意事项:Prettier 只支持格式化 JavaScript、TypeScript、HTML、CSS(Less、SCSS)、JSON、GraphQL、Markdown、YAML 等语言 [1],对其他语言的代码块不会进行格式化,还请注意。

Quickadd 脚本

module.exports = async () => {
  const { exec } = require("child_process");
  const file = app.workspace.getActiveFile();
  const fileFullPath = app.vault.adapter.getFullPath(file.path);
  const command = `prettier --write --semi=true "${fileFullPath}"`;

  // 执行命令
  exec(command, (error, stdout, stderr) => {
    if (error) {
      console.error(`执行命令时出错: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`命令执行错误输出: ${stderr}`);
      return;
    }
    console.log(`命令执行成功: ${stdout}`);
    new Notice("Prettier格式化成功!");
  });
};

Reference

  1. API · Prettier
  2. Options · Prettier

  1. What is Prettier? · Prettier ↩︎

2 个赞

请问Quickadd 脚本 需要写在什么地方吗

QuickAdd JS & Templater JS 简介及相互修改 - 经验分享 - Obsidian 中文论坛

这个方法不好,Obsidian有个code files插件,可以直接在代码区右键在Monaco 编辑器中打开,还支持编辑代码文件。

拓展:QuickAdd脚本-双击代码块在Monaco 编辑器打开

用脚本设置打开一个代码块空白区域双击的事件监听器,当你在代码块空白区域双击时既可触发Code Files插件的命令,将当前代码块Monaco 编辑器中打开。

效果如下:
File-20250114012841651

250114_双击代码块在Monac中打开.js

将下面的代码保存为js文件。

// 全局变量,确保只添加一次事件监听器
if (typeof window.isDblClickListenerAdded === 'undefined') {
  window.isDblClickListenerAdded = false;
}

module.exports = async () => {
  if (!window.isDblClickListenerAdded) {
    document.addEventListener('dblclick', function (event) {
      // 编辑模式下,代码块空白处双击用code-files插件打开
      if (event.target.matches('.HyperMD-codeblock')) {
        console.log('Code block double-clicked!');
        try {
          app.commands.executeCommandById("code-files:open-codeblock-in-monaco");
        } catch (error) {
          console.error('Error executing command:', error);
        }
      }

      // 双击tab标题,定位文件列表
      if (event.target.matches('.workspace-tab-header-inner-title')) {
        console.log('Tab double-clicked!');
        try {
          app.commands.executeCommandById("file-explorer:reveal-active-file");
        } catch (error) {
          console.error('Error executing command:', error);
        }
      }
    });

    window.isDblClickListenerAdded = true;
  }
};

并且可以QuickAdd的Macro的自启动,即启动Obsidian时自动加载改事件监听器。

1 个赞