Obsidian 插件:【Readme】Code Styler

Obsidian 插件:【Readme】Code Styler

插件名片

  • 插件名称:Code Styler
  • 插件作者:Mayuran Visakan
  • 插件说明:在阅读视图和编辑视图中对代码块和内联代码进行样式设置。
  • 插件分类:[‘obsidian 插件 ’, ‘readme’]
  • 项目地址:点我访问
  • 国内下载地址:下载安装

概述

在阅读视图和编辑视图中对代码块和内联代码进行样式设置。

Obsidian 插件:【Readme】Code Styler--概述

原文出处

下面自述文件的来源于 Readme


Readme(翻译)

下面是 code-styler 插件的自述翻译

代码样式插件

代码样式插件--Readme(翻译)

代码样式插件--Readme(翻译)

这是一个为 Obsidian.md 设计的插件,可以在编辑模式和阅读模式下对代码块和内联代码进行样式设置。

设置

排除的代码块

该插件可以设置忽略某些代码块(例如,如果另一个插件使用了像 dataview 代码块这样的代码块)。这些代码块在设置中以逗号分隔的列表形式设置。通配符* 操作符也可以用于匹配语言,例如使用 ‘ad-*’ 来匹配警告。

此设置用于告诉插件它可以完全忽略哪些代码块,而不仅仅是不装饰代码块。要不装饰代码块,请使用 排除语言设置

注意
为您使用的其他插件使用的代码块设置排除的代码块非常重要,否则,在某些情况下,插件不知道要忽略哪些代码块。

排除的语言

该插件可以设置忽略某些语言(例如,如果您不希望装饰 python 代码块)。这些语言可以在设置中以逗号分隔的列表形式设置。通配符* 操作符也可以用于匹配诸如 ‘ad-*’ 以匹配警告。

此设置用于告诉插件不要装饰某些语言。要完全忽略一个代码块(即在阅读模式下不生成渲染的代码块作为插件的结果),请使用 排除的代码块设置

主题

该插件提供了一个“默认”主题和几个基于流行配色方案的主题。默认主题使用现有的 Obsidian 主题定义的颜色,以最小化安装时的外观变化(它使用当前主题定义的 CSS 变量)。

所有主题都可以自定义浅色和深色模式的颜色(要更改特定模式的颜色,请先切换到该模式,然后在设置中更改颜色)。每个主题还包括其他外观设置,例如显示行号,允许高亮覆盖行号等。

当在主题中更改设置或颜色时,该更改不会保存到主题中;您必须点击主题名称旁边的更新按钮,将该主题更新为当前设置。请注意,无法保存对内置主题的更改。

可以在主题中设置的不同组件颜色包括:

  • 代码块背景颜色
  • 代码块文本颜色
  • 行号栏背景颜色
  • 行号栏文本颜色
  • 代码块行号当前行指示器
  • 代码块标题栏背景颜色
  • 代码块标题栏标题文本颜色
  • 代码块标题栏分隔线颜色
  • 代码块标题栏语言标签背景颜色
  • 代码块标题栏语言标签文本颜色
  • 编辑器活动行高亮颜色
  • 代码块活动行高亮颜色
  • 默认高亮颜色
  • 其他高亮颜色
  • 按钮颜色
  • 按钮活动颜色

默认 Obsidian 主题下的“默认”主题在深色模式下的颜色:

代码样式插件--主题

默认 Obsidian 主题下的“默认”主题在浅色模式下的颜色:

代码样式插件--主题

默认 Obsidian 主题下的“默认”主题在深色模式下的颜色:

代码样式插件--主题

默认 Obsidian 主题下的“Solarized”主题在深色模式下的颜色:

代码样式插件--主题

我不是设计师,所以如果您创建了一个很酷的主题,请将颜色代码发送给我,我可能会在下一个版本中将其作为默认主题包含进去 :-)

代码块参数

代码块参数被添加到语言后的代码块的第一行。它们可以以任何顺序添加。如果没有设置语言,则在代码块分隔符 ``` 后应留出一个空格,以表示第一个参数不是代码块的语言。

示例:

  • ```cpp fold title:example_title
  • ```cpp title:example_title fold(与上一行效果相同)
  • ``` fold title:example_title(如果没有设置语言)

行号

行号可以在主题的设置中启用/禁用。除此之外,是否应用行号还可以在代码块本身中使用 ln 参数进行额外指定。

设置 ln:true 将始终显示行号,ln:false 将永远不显示行号,而 ln:NUMBER(例如 ln:27)将始终显示从指定数字开始的行号(因此偏移量为该数字减一)。

标题

要为代码块显示一个标题,在代码块的第一行指定 title:,然后跟上标题。如果标题包含空格,可以使用 ""'' 将其指定在其中,例如:title:"long filename.cpp"

示例:

```cpp title:test.cpp`

代码样式插件--标题

```cpp title:“long filename.cpp”`

代码样式插件--标题

折叠

要在打开文档时指定初始折叠状态,请使用 fold 参数。如果在代码块中设置了 fold,那么在打开文档时,代码块将自动折叠,只显示标题。您可以通过点击标题来展开代码块。

点击任何标题都会切换该代码块的折叠状态。

当没有设置 title 参数时,折叠的代码块将具有默认的折叠占位符标题。可以在设置中更改此设置,或者可以通过在折叠参数后设置字符串来更改特定参数,例如 fold:Foldedfold:"Collapsed Codeblock"

示例:

```cpp fold

代码样式插件--折叠

```cpp fold:"This is collapsed"

代码样式插件--折叠

点击标题

代码样式插件--折叠

高亮显示

要高亮显示行,请在代码块的第一行中指定 hl:,后面跟着行号、纯文本或正则表达式。

您可以使用逗号(不带空格)分隔的以下任何高亮类型,例如:hl:1,3-4,foo,'bar baz',"bar and baz",/#\w{6}/

  • 单个数字:hl:1 将高亮显示第一行
  • 数字范围:hl:1-3 将高亮显示从第 1 行到第 3 行
  • 纯文本:hl:foo 将高亮显示包含单词 foo 的行
  • 用引号括起来的纯文本:hl:'bar baz'hl:"bar baz" 将高亮显示包含单词 bar baz 的行
  • 正则表达式:hl:/#\w{6}/ 将高亮显示与该正则表达式匹配的行(通过 regex.test(line) 进行测试)- 对于此示例,任何包含十六进制颜色的行都会被高亮显示

这些组合将高亮显示所有相关行。

示例:

cpp hl:1,3-4,foo,'bar baz',"bar and baz",/#\w{6}/

代码样式插件--高亮显示

在设置中,可以设置高亮显示行号以及代码。

示例:

代码样式插件--高亮显示

由默认高亮参数或替代高亮参数创建的高亮显示可以在设置中设置为渐变高亮显示,向右侧淡出。还可以设置此渐变的颜色停止百分比。

示例:

代码样式插件--高亮显示

备选高亮

您还可以通过定义具有名称的备选高亮颜色来定义多个高亮颜色。该名称将用作参数,并且您可以像使用 hl 参数一样使用它。

示例:

您可以添加三种其他类型的高亮颜色(infowarnerror)。在设置中添加这些并设置所需的颜色后,您可以在代码块的第一行中使用它:

```cpp info:2 warn:4-6 error:8

代码样式插件--备选高亮

相应的设置:

代码样式插件--备选高亮

解开

是否换行可以在设置中设置。有一个高级选项叫做“单击换行”,在代码块的内容上按住鼠标会导致内容换行(如果已经在设置中设置了换行)。

这些设置也可以通过 unwrap 参数在每个代码块上进行设置,该参数会覆盖设置。设置 unwrap:true 将解开代码块中的行,设置 unwrap:false 将在代码块中换行,设置 unwrap:inactive 将解开代码块中的行,但在按住鼠标时会换行。参数 wrap 只是 unwrap:false 的别名,而 unwrap 只是 unwrap:true 的别名。

示例:

```python unwrap:true ```python unwrap

代码样式插件--备选高亮

```python unwrap:false ```python wrap

代码样式插件--备选高亮

```python unwrap:inactive

代码样式插件--备选高亮

忽略

除了排除语言外,插件还可以通过包含 ignore 参数来告诉它不应用于特定的代码块。

还可以通过在笔记的前置元数据中添加 code-styler-ignore: true 来告诉插件不应用于特定的文件。

示例:

```cpp ignore

代码样式插件--忽略

code-styler-ignore: true

代码样式插件--忽略

外貌

代码块

可以在设置中更改代码块的曲率,使其显示更圆或更直。

如果在设置中启用,代码块的左边框可以根据语言进行着色(颜色与语言图标相匹配)。还可以更改此边框的宽度。

示例:

代码样式插件--忽略

头部

在以下情况下会显示头部:

  • 您指定了 title:
  • 您指定了 fold 如果您指定了 fold 但没有指定 title:fold:,则默认文本将显示在头部(默认为“折叠代码”)
  • 您通过 ```language 定义了代码块语言,并在主题设置中将 Display Header Language Tags 设置为 Always 或将 Display Header Language Icons 设置为 Always

如果显示了头部,则折叠也会起作用。如果将 Display Header Language Tags 设置为 Always,则头部将始终显示代码块语言,如果将其设置为 If Header Shown,则仅在显示头部时显示(即设置了 title 参数)。

您可以在设置页面中启用选项以显示头部中的图标。当此选项设置为 If Header Shown 时,如果代码块中指定的语言具有图标并且显示了代码块头部(即设置了 title 参数),则会显示图标。当此选项设置为 Always 时,如果代码块中指定的语言具有图标,则始终显示带有图标的头部。图标还可以在设置中设置为灰度或调整大小。目前有大约 170 个不同语言的图标可用。

语言标签文本和标题文本也可以设置为粗体和/或斜体,以及特定字体。此外,头部文本的字体大小可以更改。

示例:

  • 无头部 代码样式插件--头部

  • 仅带折叠的头部 代码样式插件--头部

  • 仅带代码块语言的头部 代码样式插件--头部

  • 带有代码块语言和标题的头部 代码样式插件--头部

  • 带有代码块语言、标题和图标的头部 代码样式插件--头部

活动行指示器

如果在设置中启用,代码块内的活动行可以用自定义颜色进行突出显示。如果还在设置中启用了此设置,还可以通过不同颜色的行号来指示活动行。

如果在设置中启用,代码块外的活动行也可以用自定义颜色进行突出显示。

示例:

代码样式插件--活动行指示器

代码样式插件--活动行指示器

代码样式插件--活动行指示器

内联代码也可以通过设置来自定义背景颜色、文本颜色、编辑时的文本颜色、字体粗细、内联代码周围的间距和内联代码的曲率。

内联代码在编辑模式和阅读模式下都可以进行语法高亮,使用的高亮样式与代码块相同。可以通过使用语法 {语言} code here 来设置(注意 {语言}code here 之间的空格是不必要的)。

您也可以将文本 {text here not styled} 作为内联代码输入,只需在插件激活时在其前面加上空的 {}{}{text here not styled} 将在光标位于内联代码之外时生成 {text here not styled}

示例:

{python} 'result if true'.method() if 1 else result_if_false.property

代码样式插件--活动行指示器

您还可以在内联代码之前使用参数 title:icon 来设置标题和/或显示图标。title 可以用引号或双引号括起来的多个单词。

示例:

{python icon} 'result if true'.method() if 1 else result_if_false.property

代码样式插件--活动行指示器

{python title:'Inline If'} 'result if true'.method() if 1 else result_if_false.property

代码样式插件--活动行指示器

{python title:'Inline If' icon} 'result if true'.method() if 1 else result_if_false.property

代码样式插件--活动行指示器

插件兼容性

该插件与以下 Obsidian 插件完全兼容:

代码样式插件--插件兼容性

代码样式插件--插件兼容性

代码样式插件--插件兼容性

代码样式插件--插件兼容性

路线图

请查看 路线图讨论

如何安装插件

  • 直接从 Obsidian 安装即可
  • 或者您可以将 main.jsstyles.cssmanifest.json 复制到您的 vault VaultFolder/.obsidian/plugins/code-styler/ 中,或者使用 Obsidian Beta Reviewers Plugin

贡献

欢迎所有的贡献者,只需创建一个合并请求。路线图 中的项目列表是一个很好的起点!

请尽量创建可重现的错误报告/问题,包括以下内容:

  • 可重现性:包括重现问题的步骤
  • 具体性:包括可能的插件冲突、主题冲突等相关细节
  • 独特性:请不要重复已存在的未解决问题,而是在现有问题上添加内容
  • 范围:请为每个已识别的错误创建一个单独的问题

维护者

贡献者

代码样式插件--贡献者

使用 contrib.rocks 制作。

此插件基于 @mugiwara85Codeblock Customizer Plugin

支持

如果您喜欢这个插件,并希望帮助支持持续开发,请使用下面的按钮!

代码样式插件--支持

许可证

根据 MIT 许可证进行分发。有关更多信息,请参阅 LICENSE



反馈交流

其他渠道

版权声明