Lilly
(Lillian Louis)
1
説明
これは、Discourseの投稿内のコードブロックに行番号を追加するシンプルなテーマコンポーネントです。インラインコード、2行未満のブロック、引用されたコードブロックには行番号を追加しません。また、Githubのoneboxコードも無視します。さらに、フォントサイズを変更したり、コード言語の前に表示されるヘッダータイトルを追加したりできます（最初のコードフェンスの後に指定されている場合）。
@Donにも素晴らしい功績を称えたいと思います。
デスクトップおよびモバイルビューで動作します。 
タイトル付きのダークモード：
タイトルなしのライトモード - プレビューアで：
投稿結果：
2つの設定があります。
| 設定 |
説明 |
code-block header title |
指定されている場合、コードブロックのコード言語の前にテキストヘッダータイトルを追加します（なしの場合は空白のままにします） |
code-block text size |
コードブロックのテキストサイズ（px）（デフォルトの場合は空白のままにします） |
注意：フォーラムでコードブロックをラップするためにCSSを使用している場合、このコンポーネントはラップをカウントします。
「いいね！」 15
Jagster
(Jakke Lehtonen)
2
試さずにコピーした場合、行番号は追従しないですよね？
「いいね！」 3
ダークテーマまたはライトテーマを選択するオプションを追加してください。ディスカッションページはデフォルトでライトテーマになりますが、コードブロックはGitHubスタイルのダークテーマカスタマイズになります。
これは、ディスコースページがライトテーマを使用し、コードブロックがダークGitHubスタイルで表示されるように設定されている状態です。
ここでは、ディスコースページでのコードブロック表示に関するカスタマイズも共有します。
誰かのディスコースページをより面白くするのに役立つことを願っています。
/*CSS コードブロック ターミナル風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 ディスコース コードブロック 行番号*/
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
この機能をディスコースのメインラインに追加する可能性はありますか？私が使用している予算ホスティングプランでは、裁量プラグインなどはサポートされていません。これは非常に役立ちそうです。@Lilly および他の開発者、テスターの皆様に感謝いたします。
merefield
(Robert)
7
プラグインではありません。テーマコンポーネントです。テーマコンポーネントの使用は制限されていないと思いますが？
「いいね！」 4
@merefield ありがとうございます。プロバイダーに説明を求めるリクエストを提出し、チケットを発行してもらいました。何か注目すべきことがあれば、また報告します。
「いいね！」 1
これはまさに管理者のための問題です！ \u003chttps://meta.discourse.org/t/code-block-line-numbers/330130\u003e にアクセスし、「このテーマコンポーネントをインストールする」という青いボタンをクリックし、私のフォーラムの名前を入力してから、私のフォーラムインターフェースでそのアクションを確認しました。ここまでは順調です。
この機能はその後コンポーネント（技術的にはテーマコンポーネントだと思います）としてリストされ、バージョン 0.0.2 と報告されました。しかし、ダイアログでは、このアーティファクトは現在「未使用のコンポーネント」と見なされていることが示唆されています。そして、3つの ``` バッククォート構文を使用した簡単な試行では、行番号は表示されませんでした。
他に何かする必要はありますか？ TIA。
「いいね！」 1
Lilly
(Lillian Louis)
10
@robbie.morrison トピック投稿（このトピックの最初の投稿）をお読みください。必要な情報がすべて含まれています。また、インスタンスにテーマコンポーネントをインストールする場合は、これらの指示を参照してください。
「いいね！」 4
merefield
(Robert)
12
はい。コンポーネントをテーマに追加します（そうしないと「未使用」のままになります）。また、テーマがまだアクティブでない場合はアクティブにします。
「いいね！」 4
@merefield @Lilly ありがとうございます。このテーマコンポーネントを「デフォルト」テーマに追加する必要がありました。こちらで説明されているように：テーマにコンポーネントを追加する。そして、それは機能します（以前に間違ったスクリーンショットを追加していたことに注意してください）：
ドキュメントに関するコメントがいくつかあります。正しい場所は、私の考えでは次のとおりです：コンポーネント ⯈ カスタマイズ ⯈ テーマ。そして、テーマへの追加に関するセクション（上記のURLを参照）は、実際よりもいくぶん任意であるように聞こえます。おそらく、この表現の方が良いでしょう：「テーマコンポーネントが機能するようになる前に、明示的にテーマに追加する必要があります。これには「デフォルト」テーマも含まれます。」
ご興味と時間を割いてくださった皆様、ありがとうございます。また、次の投稿で小さなバグレポートを提出する予定です。
「いいね！」 2
約束通り、バグレポートを提出します。GitHub の以下のコードブロックは、すでに行番号が付いていました。Discourse Code Block Line Numbers というタイトルのテーマコンポーネントをインストールした後、交互の空行が追加されました。
元の投稿はこちらにあります。そして、情報は単純なURL経由で提供されました。興味のある方は、WikipediaのSankeyダイアグラムで詳細をご覧ください。：woozy_face:
明確化；交互の空行とは、全くテキストのない完全に空の行を意味します。以前のレンダリングはこのようにスペースが空いていませんでした。
「いいね！」 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
こんにちは、このテーマコンポーネントは次のようなエラーを報告します
Error: Undefined mixin. ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ line-numbers.scss 17:9 @import /var/www/discourse/common.scss 1:570 root stylesheet
「いいね！」 2
sticky mixin は最近の PR でコアから削除されました。
PR を作成します！
できました：
「いいね！」 3
Lilly
(Lillian Louis)
22
マージされました。@Arkshine さん、ありがとうございます 
「いいね！」 3
