思源笔记设置代码块输出结果的样式

预览

Tsundoku 主题下预览

GIF 动图

自定义 CSS

给块设置 code=output 自定义属性就可以

/* 代码块输出code output */
.protyle-wysiwyg .code-block[custom-code="output"] .protyle-action .protyle-action__language{
    opacity: 0;
}
.protyle-wysiwyg .code-block[custom-code="output"]{
    background-color: transparent;
    margin: 0 0 1em 0 !important;
}
.protyle-wysiwyg .code-block[custom-code="output"] .hljs{
    background-color: transparent !important;
    padding: 5px 15px 10px 15px;

}
​

备注：只在 Tsundoku 主题下测试

JS

为了便捷添加，可以用 js 添加一个按钮，设置块属性

我是直接在 Tsundoku 的 theme.js 里直接改的，没有空搞代码片段，感兴趣的朋友可以自己折腾下