少数派上众多 Notion 的推荐使用文章让我早已对 Notion 跃跃欲试,却始终苦于没有合适的使用场景。新学期到来,综合考虑了易用、颜值、全面等特性之后,我终于拾起了 Notion,将其用于新的一年的课堂笔记。然而作为一个理工科学生,Notion 中行内公式的功能缺失让人十分难受。而官方开发者大概也是忙于基础功能的开发和修补,在 Twitter 回应大家的行内需求公式一年后的今天,这个小小功能依然没有被实现。

Notion 一年前对于行内公式提高优先级的回应

在回归纸笔记录几天后,我终于在 Reddit 上发现了通过网页端脚本曲线救国渲染行内公式的方法,在此分享给大家。需要注意的是,这个方法还是有诸多弊端,比如需要在文档中有至少一个官方的数学公式 block, 仅适用于网页端渲染等,大家还是酌情考虑是否使用。

安装使用

最初版本的脚本实现可以在这个地址 找到,但这个一年前的版本还需要快捷键触发才能渲染,且语法不与 Markdown 相容,相对来说较为不便。而改进版本(github 地址)则是设定了自动渲染时间,且支持 Markdown 的行内公式语法,推荐大家尝试这个版本。

首先,因为该方法依赖于在浏览器运行脚本,作者推荐使用 Violentmonkey 插件运行,但实测 Tampermonkey 上也运行正常。从浏览器应用商店下载安装完成后,创建新的脚本,内容如下:

// ==UserScript==
// @name           Notion Inline LaTeX
// @namespace       https://github.com/Penguinlay/notion-inline-latex
// @match           https://www.notion.so/*
// @version         0.5
// @description     User Script for Inline LaTeX Rendering in notion.so
// @require         https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js
// @require         https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js
// @grant           GM_addStyle
// ==/UserScript==

// Note:
// Script does not change the content.
// It merely changes the display after the contents are loaded.
// Need at least one math block present on the page for the script to work properly.
// Small value for startUpWaitTime and keyUpWaitTime can make the script load improperly.
// Add delimiters as desired though delimiters other than default one have not been tested yet.

// Acknowledgement
// This script is inspired by the project by Evert Heylen.
// https://github.com/evertheylen/notion-inline-math

// right-padding for inline math mode
GM_addStyle(`
.katex {
   padding-right: 0 !important;
}
`);

// declare/init vars
let timer; // timer identifier
let startUpWaitTime = 3000; // ms after startup (adjust as needed)
let keyUpWaitTime = 2000; // ms after keyup   (adjust as needed)

// render inline LaTeX
function renderInlineLaTeX() {
 renderMathInElement(document.body, {
   delimiters: [
     // LaTeX delimiters (uncomment/add as needed)
     // { left: "$$" , right: "$$" , display: true },
     // { left: "\\[", right: "\\]", display: true },
     // { left: "\\(", right: "\\)", display: false },
    { left: "$", right: "$", display: false }
  ]
});
 console.log("Inline LaTeX is rendered.");
}

// on startup...
console.log("Rendering inline LaTeX on startup...");
clearTimeout(timer);
timer = setTimeout(renderInlineLaTeX, startUpWaitTime);

// on keyup...
document.addEventListener("keyup", () => {
 console.log("Rendering inline LaTeX on keyup...");
 clearTimeout(timer);
 timer = setTimeout(renderInlineLaTeX, keyUpWaitTime);
});

保存并退出后,我们就可以打开 Notion 的网页版尝试输入行内的数学公式了。在同一页中有数学公式 block 的前提下,行内数学公式会在输入完成数秒后进行渲染(光标所在的行不会有变化)。

如果有在使用 AdGuard 的朋友,也可以选择将脚本保存为 JavaScript 文件(文件拓展名需要为 .js),通过在 AdGuard 的设置中添加本地文件作为拓展应用,以实现脚本的跨浏览器运行,省去每种浏览器都要安装一次脚本的麻烦。

AdGuard 拓展

如果没有能够成功渲染的朋友,可以检查一下同一页中是否已经有数学公式 block,或者脚本是否开启。如果都没有问题,或许可以耐心地再等待两秒钟或者刷新一下页面。

目前问题

这个解决方案只是通过浏览器改变了行内公式的渲染方式,并没有真正改变我们的笔记内容,所以我们在网页端之外的地方,看到的依然是难以读懂的 $$ 符号。此外,该脚本表现并不稳定,渲染所需要的时间时长时短,只能说是功能缺失的情况下的无奈之举。

关于 Notion 的碎碎念

即使 Notion 作为笔记应用缺失了我使用频率很高的行内公式功能,我也不得不承认就目前的使用体验来讲,Notion 远比 Markdown 或者 LaTex 用来记录课堂笔记要顺手的多。灵活的排版布局,好看的界面等等优点,使得我选择使用其它方式来补救没有行内公式、甘特图等问题而非直接放弃。2020 年了,希望 Notion 开发团队能早日补完自己立下的 flag 😂

如果对该方法仍有疑问,或者你有什么更好的 Notion 辅助使用方法,欢迎大家一起交流~