有没有用 Trilium 笔记的大神 代码高亮怎么弄

331 天前
 turlin
前两天刚转到 Trilium 折腾了一下觉得都还行
现在就是代码高亮这个问题有点想咨询.因为我用的语言软件里自带的没有
能不能自己定义高亮,加到代码块的选择里,并且默认 有没有弄过的大佬可以指点一下
1177 次点击
所在节点    问与答
6 条回复
body007
331 天前
https://github.com/Nriver/awesome-trilium/blob/main/README_CN.md

里面有各种技巧,也包含高亮的方案。笔记内代码没高亮,代码笔记是有高亮的。
turlin
331 天前
@body007 盯着看了好久 但是没有说明怎么替换或者新增一个代码高亮 ....
body007
331 天前
@turlin 这个是别人的方案: https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget



去依赖官网: https://highlightjs.org/ ,下载 highlight.min.js 文件,用上图那个笔记右边 3 个点里面的导入文件。

记得按照上面图片添加笔记标签。不过最终显示效果不太好,我不喜欢,所以没用。你问起来我刚才按照 readme 弄了下。

看看效果图
body007
331 天前
@turlin 新增代码片段这里选语言类型啊。如果没有你的类型,就到配置选项里面添加。你可以看看这份中文文档: https://trilium.netlify.app/

turlin
331 天前
@body007 十分感谢大佬 膜拜
wuhufanzhou
26 天前
修改 Trilium-SyntaxHighlightWidget 插件 SyntaxHighlightWidget.js 最顶部的 template 代码,显示效果要好一些
```js
const TEMPLATE = `
<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
<style>
/* <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css" rel="stylesheet"> */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#eff;background:#212121}.hljs ::selection,.hljs::selection{background-color:#353535;color:#eff}.hljs-comment{color:#4a4a4a}.hljs-tag{color:#b2ccd6}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#eff}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#f07178}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#f78c6c}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#ffcb6b}.hljs-strong{font-weight:700;color:#ffcb6b}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#c3e88d}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#89ddff}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#82aaff}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#c792ea}.hljs-emphasis{color:#c792ea;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#ff5370}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
</style>
</div>`;
```
样式代码参考: https://code.cloudsupplies.de/cloudsupplies-services/ZabbixCalc/-/blob/main/zabbix/static/highlighting/styles/base16/material-darker.min.css?ref_type=heads

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1011753

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX