更改内联代码块的样式,使其更加突出

我有一个 Teams 客户要求内联 代码块 更醒目。目前,无论是在暗模式还是亮模式下,代码块 的颜色与其他文本的差别不大。我们能否在 Discourse 中默认更改文本颜色,使其使用更醒目的不同颜色,例如红色?

我知道这对大多数客户来说不是大问题,因为他们可以自定义主题来更改其站点的 CSS,但对于 Discourse for Teams 来说,这种程度的自定义是不可能的。同时,对于讨论代码的团队来说,代码块比其他文本更醒目,这一点非常重要。

2 个赞

谢谢 Tobias。供记录,我是客户,我想强调我只谈论“内联块”。我对多行没有疑虑。

2 个赞

是的,多行块很酷。

还有其他方法可以突出显示文本,但显然反引号是最快捷的。

2 个赞

就我所知,如果你像我一样是 HTML 新手(我不得不搜索了一下):

  1. Fancy! 是用 <kbd>Fancy!</kbd> 制作的
  2. Ohhhh! 是用 <ins>Ohhhh!</ins> 制作的

了解这些很有用,感谢 @tobiaseigen
我仍然认为调整 this 的 CSS 会有意义。我们有一些技术帖子大量使用了反引号,使用这两种替代方案肯定不如用户友好。

3 个赞

下次的提示:只需引用您想知道如何操作的帖子,然后您就可以看到了。

3 个赞

抱歉!通常我会揭秘这个技巧,但当时我用手机,有点匆忙。

另一个查看帖子创建方式的实用技巧是使用原始 URL,例如 https://meta.discourse.org/raw/57255/7

4 个赞

哦,还有第三种不错的强调方式,我总是会忘记。<mark>它看起来是这样的</mark>,使用这个 HTML 标记 \<mark\>文本\</mark\> 来实现。有一个社区贡献的主题组件(在 Teams 中不可用),它允许你改用 ==文本==,这非常方便。但不知何故,我暂时找不到它。

不过,我会和我的同事们讨论更新代码块的默认样式,使它们更明显。也许仅仅是让代码块的背景颜色更具辨识度就足够了。

3 个赞

Got a PR to change inline codeblocks in core here: PR: Inline code block styling edits by jordanvidrine · Pull Request #16394 · discourse/discourse · GitHub

6 个赞

抱歉……暂时回滚。

3 个赞

行内代码一直看起来像普通代码,使用等宽字体。任何非常明亮和刺眼的东西都将高度依赖于社区,并且肯定与我在网上大多数地方看到的 code 的用法不一致。

语法高亮的问题则不同;你需要多行代码来确定你正在处理的语法。也许这就是问题的根源——如果你想要语法高亮,你需要一个代码,例如:

var x, y, z;  // 声明 3 个变量
x = 5;    // 将值 5 分配给 x
y = 6;    // 将值 6 分配给 y
z = x + y;  // 将 x 和 y 的总和分配给 z

document.getElementById("demo").innerHTML =
"z 的值是 " + z + ".";

单个 code 元素脱离了进行语法高亮所需的所有上下文。不过,你可以写一行 JavaScript:

"z 的值是 " + z + ".";

看起来像:

``` javascript
"z 的值是 " + z + ".";
```

所以我想这大概是关于代码块代码单词的区别。

3 个赞

我想@jordan.vidrine 这里有明确的指示。就直接完全撤销这次更改。也许可以做一个“替代代码样式”的主题组件,它可以完全像Slack那样将行内代码变成红色,毕竟它是一个组件。

3 个赞

这个最近的迭代是 Meta 上一个活跃的主题组件,而不是实际的更改,因此我已经将其禁用了。

4 个赞

Fine to not make this change. :+1:

I think the ask here really was for a quick and easy way to highlight text in discussions. Many people (myself included) have taken to using backticks to highlight text because it’s super easy.. you don’t even have to press shift, and it’s discoverable on the menu. But it’s not very distinct from the rest of the text in the para.

Bold and italics are also on the menu and also do not stand out very much. Other ways to highlight text inline take more keystrokes. Also they are not prominently documented so also require insider knowledge.

As far as I know these are the best ones:

Button <kbd>Button</kbd>
Green underline <ins>Green underline</ins>
Red strikethrough <del>Red strikethrough</del>
Highlight <mark>Highlight</mark>
Strikethrough <strike>Strikethrough</strike>

For folks who can install plugins, there is the official Discourse BBCode color plugin. And for those who cannot install plugins, @merefield created the Discourse Coloured Text theme component.

I also liked the theme component that converted ==highlight== to <mark>highlight</mark>, but have lost track of it here on meta.

3 个赞

这目前需要在插件中完成,因为您希望将其烘焙到 HTML 中,而不仅仅是执行客户端转换。

查看 https://markdown-it.github.io/ 似乎在非严格模式下,它现在在 markdown.it 中是默认启用的,@Vitaly

3 个赞

有意思。谢谢你的解释。

今天我在浏览 Plugin 类别时偶然发现了这个插件……真有趣,有时候你就是想不到正确的关键词来找到插件。:rofl:

2 个赞

哦,我明白了……根实现在这里:

1 个赞

独立于解决方案,我认为当前 code block 的设计存在明显的 UX 问题。对比度几乎不存在。

引用 @codinghorror 的话,我会说“网络上的大多数地方”都没有出现这个问题。

参见 GitHub:

或 Slack:
image

甚至 Notion:
image

我认为 绿色下划线高亮 都存在完全相反的问题,即不必要的超高对比度,但这更多是品味问题而非 UX 问题。

是否可以采用 GitHub 的方法,使用更深的灰色背景和一些内边距?

2 个赞

复杂之处在于,要为每一个 Discourse 实例倡导巨大的改变,而许多实例已经习惯了当前的温和样式。这是一个重大的“奶酪”举动。

大多数安装已经存在添加 CSS 的变通方法。

1 个赞