代码块主题选择器

:discourse2: 摘要 Codeblock Theme Picker 将允许你轻松更改代码块中使用的主题。
:eyeglasses: 预览 在 Discourse Theme Creator 上预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/hljs-theme-picker
:open_book: 初次使用 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

功能

这只是可用选项的一小部分。此组件包含了 所有 90 个选项,这些选项来自 hljs 仓库。

:information_source: 虽然此组件包含了所有选项,但它只会加载你选择的那个。因此,没有额外的开销。

如何使用

由于此组件的接线方式,它需要对你的站点设置进行少量更改。

  1. 前往 your.site.com/admin/site_settings/
  2. 搜索 theme_authorized_extensions
  3. css 添加到该列表中。

如下所示:

:warning: 你必须在安装组件之前执行此操作,否则它将无法工作。

完成后,你可以像安装其他组件一样安装此组件。

设置

名称 描述
hljs 主题 选择代码块要使用的主题。你可以访问 hljs 演示页面 预览主题
hljs 深色匹配 如果可用,则加载深色配色方案

如果你需要查看选项的外观,请查看此处 We're not a CDN - highlight.js

一旦你决定使用哪个 hljs 主题,你可以在下拉列表中搜索你想要的主题并保存设置。你需要刷新页面才能使所有内容开始工作。

致谢

此组件中包含的所有 hljs 主题在其各自的文件中都有版权信息。所有这些作者(:heart:)的列表太大,无法在此处添加,但你可以 在此处 查看它们。


:discourse2: 由我们托管? 主题组件在我们的 Standard、Business 和 Enterprise 计划中均可使用。

42 个赞

这个主题非常实用,已在我的网站上运行了很长时间。然而,我最近发现它在 Firefox 上出现了问题:自定义 CSS 文件被以下响应头 X-Content-Type-Options: nosniff 拦截。控制台显示该 CSS 文件的 MIME 类型为 text/html。无论我选择哪个主题,这个问题在 Firefox 上都会出现,但在 Chrome 中则正常。

如果选中的代码块样式也能作为用户偏好设置进行选择,这个超级主题组件将会更加出色。

5 个赞

附议。如果能作为用户偏好设置就太棒了。

有没有办法显示行号?

很棒的组件主题。

有一个问题,highlight.js 演示 上有 242 个主题。例如,“Github Dark Dimmed”如附件图片所示。

有什么方法可以解决这个问题吗?感谢建议。

不幸的是,这稍微有点复杂。

Discourse 目前运行的是 highlight-js 的 10.6.0 版本。目前缺失的大部分额外主题(如 base16 系列)需要 11.0 版本才能支持。

问题在于,该版本引入了一些破坏性变更和弃用项。请查看此处:

因此,这意味着当前的选项将在一段时间内保持不变。首先,需要在 Discourse 的 tests-passed 中更新 highlight-js 的版本。然后,我们需要等待一个稳定的发布版本。如果现在更新主题(即使是现有的主题),也会让我们处于一种糟糕的状态,因为很难猜测这些主题在你的网站上是否能正常工作。

4 个赞

此组件在最新的 Beta 版本中似乎已损坏 - 安装后,高亮显示不再正常工作。我从主题中删除了该组件,它又开始正常工作了 - 我只是无法选择高亮显示主题。

2 个赞

确认最新测试版在这里的语法高亮也已损坏

@Falco 合并了一个针对此组件的修复程序:DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

它包括对 highlight.js 11 版主题的更新(核心也已更新至 highlight.js 11 版),并修复了样式缺少正确特异性的问题。

2 个赞

安装组件时遇到此错误

创建上传资源时出错: a11y-dark。原始文件名抱歉,您尝试上传的文件未获授权(授权扩展名:wasm、jpg、jpeg、png、woff、woff2、svg、eot、ttf、otf、gif、webp、avif、js)。

你做了这个部分 :point_down:

1 个赞

哦不,我要这么做了 :拥抱:

1 个赞

我刚发现这个主题组件,很高兴它存在!我注意到 hljs dark match 设置似乎不起作用。

例如,我们将 hljs theme 设置为 atom-one-light(也有 atom-one-dark)。

刷新后,atom-one-light 在暗模式下生效,但切换到暗模式时代码块不会切换到暗色——它仍然是浅色。


安装主题组件时收到此错误消息,希望有人能指导社区如何修复它们

您是否将 css 添加到了允许的主题扩展列表中?

1 个赞

谢谢,它奏效了 ^^

1 个赞

注意:

应该是:

这个主题组件在最新版本中似乎已损坏。

我已经将 css 添加到 theme_authorized_extensions 设置中,并尝试重新安装该组件,但代码块样式仍然没有应用。

您能核实一下吗?谢谢。