Codeblock 主题选择器

:discourse2: 摘要 代码块主题选择器 将允许您轻松更改代码块中使用的主题。
:eyeglasses: 预览 在 Discourse 主题创建器中预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/hljs-theme-picker
:open_book: Discourse 主题新手? 使用 Discourse 主题的初学者指南

安装此主题组件

功能

这只是众多可用选项中的一小部分。该组件包含 hljs 仓库中提供的 所有 90 种选项

: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 主题都在其 respective 文件中包含版权信息。所有作者 (:heart:) 的列表太长,无法在此列出,但您可以在此处查看它们 此处


:discourse2: 由我们托管? 主题组件可在我们的标准版、商业版和企业版计划中使用。

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 设置中,并尝试重新安装该组件,但代码块样式仍然没有应用。

您能核实一下吗?谢谢。