Lilly
(Lillian Louis)
1
描述
这是一个简单的 Discourse 主题组件，它可以在 Discourse 帖子中为代码块添加行号。它不会为行内代码、少于 2 行的代码块或引用的代码块添加行号。它还会忽略 Github onebox 代码。此外，该组件允许您更改字体大小并添加一个标题，该标题将出现在代码语言之前（如果它在第一个代码围栏之后指定）。
感谢 @Don 的辛勤工作。
在桌面和移动视图中均可正常工作。 
深色模式，带标题：
浅色模式，无标题 - 在预览器中：
帖子结果：
有两个设置。
| 设置 |
描述 |
code-block header title |
在代码语言之前为代码块添加文本标题（如果已指定）（留空则不显示） |
code-block text size |
代码块的文本大小（以像素为单位）（留空则使用默认值） |
注意：如果您正在使用 CSS 来包装论坛上的代码块，此组件将计算包装。
15 个赞
请添加选择深色或浅色主题的选项，因为我的讨论页面默认使用浅色主题，但代码块使用的是深色主题，并且是 GitHub 风格的自定义。
这是 Discourse 页面使用浅色主题而代码块设置为深色 GitHub 风格显示时的状态
在此，我还分享一些关于我的 Discourse 页面上的代码块显示自定义。
希望它能对某人有所帮助，并使他们的 Discourse 页面更有趣
/*CSS Codeblock like terminar macos*/
.codeblock-buttons {
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
border-radius: 7px 7px 0 0;
display: flex;
flex-direction: column;
&:before{
content:'Business Lab';
display: grid;
justify-content: center;
font-family: var(--d-font-family--monospace);
font-weight: bold;
padding: 5px;
background-color: #E8E6E8;
color: black;
order:1;
}
&:after{
content:"";
width: 12px;
height: 12px;
display: inline-block;
border-radius: 15px;
margin-left: 2px;
border-width: 1px;
border-style: solid;
background: #EC6A5F;
border-color: #D04E42;
order:2;
position: absolute;
top: 10px;
left: 5px;
}
& .codeblock-button-wrapper{
right: .5rem !important;
top: .25em !important;
order:3;
width: 100%;
&:before{
content:"";
width: 12px;
height: 12px;
display: inline-block;
border-radius: 15px;
margin-left: 2px;
border-width: 1px;
border-style: solid;
background: #F5C04F;
border-color: #D6A13D;
position: absolute;
top: 6.5px;
left: 30px;
}
&:after{
content:"";
width: 12px;
height: 12px;
display: inline-block;
border-radius: 15px;
margin-left: 2px;
border-width: 1px;
border-style: solid;
background: #64CC57;
border-color: #4EA73B;
position: absolute;
top: 6.5px;
left: 48px;
}
& .btn.nohighlight{
padding: .7em;
float: right;
&.copy-cmd{
position: absolute;
right: 0px;
}
&.fullscreen-cmd{
position: absolute;
right: 3.2em;
}
&.copy-cmd:not(.action-complete), &.fullscreen-cmd:not(.action-complete){
opacity: 1;
visibility: visible;
}
}
}
& code{
order:4;
}
}
/*CSS Discourse Code Block Line Numbers*/
code{
&.lines-decorator{
padding: 0px;
&.lines-shadow{
background-image: linear-gradient(to right, var(--github) 25%, transparent), linear-gradient(to left, var(--github) 25%, transparent), linear-gradient(to right, var(--github), transparent), linear-gradient(to left, var(--github), transparent);
}
&.lines-number:not(.lines-count-1):not(.lines-in-quote) span.lines-line::before{
background-color: #263238;
color: rgba(233, 237, 237, 1);
}
}
}
您可以参考更多 此处。
1 个赞
此功能有希望被添加到 discourse 主线吗？我使用的预算托管计划不支持自行选择的插件。这个功能看起来非常有用了。感谢 @Lilly 以及其他开发者和测试人员。
它不是一个插件。它是一个主题组件。我不认为您不能使用主题组件？
4 个赞
@merefield 谢谢。我已提交请求向我的服务提供商寻求澄清，并获得了一个工单。如有任何值得注意的事项，我将汇报。
1 个赞
这确实是管理员该处理的事情！我访问了 https://meta.discourse.org/t/code-block-line-numbers/330130，点击了蓝色的“Install this theme component”按钮，输入了我论坛的名称，然后在我的论坛界面确认了该操作。到目前为止一切顺利。
此功能随后被列为一个组件（我猜它在技术上是一个 Theme Component），并报告版本为 0.0.2。但是对话框提示此构件目前被视为“未使用的组件”。而使用三个 ``` 反引号语法的简单尝试并未渲染行号。
我还需要做些什么吗？提前感谢。
1 个赞
Lilly
(Lillian Louis)
10
@robbie.morrison 请阅读主题帖子（此主题中的第一个帖子），因为它包含您需要的所有信息，并且如果您在实例上安装主题组件，请参考这些说明。
4 个赞
是的。将组件添加到主题（否则它将保持“未使用”）并激活主题（如果尚未激活）。
4 个赞
@merefield @Lilly 很多感谢。我需要将此主题组件添加到我的“默认”主题中。正如这里所述：将组件添加到主题。并且它有效（请注意，我之前添加了错误的截图）：
关于文档有几点评论。我认为正确的位置是：组件 9656; 自定义 9656; 主题。而关于添加到主题的部分（参见上面的 URL）听起来比实际情况更具选择性。也许这样的措辞会更好：“您需要明确地将您的主题组件添加到主题中，然后它才能运行。这包括“默认”主题。”
感谢大家的关注和时间。我还有一个小的 bug 报告将在下次发布。
2 个赞
如我承诺的，这是我的 Bug 报告。以下来自 GitHub 的代码块已经过行号标注。安装了名为 Discourse Code Block Line Numbers 的主题组件后，出现了交替的空行。
原始帖子可以在这里找到。信息是通过一个简单的 URL 获得的。更多关于Sankey 图的信息可以在维基百科英文版上找到，有兴趣的朋友可以看看！
澄清；我所说的交替空行是指完全空白的行，没有任何文本。之前的渲染并没有这样间隔。
2 个赞
Lilly
(Lillian Louis)
15
是的，是 GitHub 行号问题。这周晚些时候我会有时间看看，然后加个条件判断。谢谢！
5 个赞
Lilly
(Lillian Louis)
16
我对这个组件进行了一些改进，还添加了几个设置，用于为代码块添加标题以及更改字体大小。还修复了 Github onebox 的格式问题（感谢 @gormus 的 PR 
）。更新了 OP 并添加了新的屏幕截图和主题创建者预览链接。
7 个赞
Lilly
(Lillian Louis)
19
此组件已再次更新 - 我修复了一个错误，即标题显示在 Mermaid 图表中。
此外，@Don 对 js 进行了一些重构，清理了一些代码，并添加了更美观的格式，包括边框以及在帖子中指定代码语言时在标题中显示代码语言。（谢谢 Don 
）。
已更新 OP 描述和屏幕截图。
4 个赞
Yt.w
20
您好，此主题组件向我报告了类似这样的错误
错误：未定义的混合。 ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ 行号.scss 17:9 @import /var/www/discourse/common.scss 1:570 根样式表
2 个赞
sticky mixin 已在最近的 PR 中从核心移除。
我将创建一个 PR！
完成了：
3 个赞
