例えば、これはSwiftコードです
func jjj () {
let jj: String = "1"
}
以下のように色付けしたいのです。
色は言語によって追加されます。ハイライトされた言語でSwiftが追加されているかどうかを確認できます。それでも検出が機能しない場合は、コードブロックの言語を手動で設定することもできます。
「いいね！」 2
コードブロックの書式設定は問題ありません。次のように追加されました（引用符は除く）。
[コードをここに]
以下のようにハイライトされますが、提供される色合いが問題です。気に入っていません。以下のようにハイライトされます。（赤い色の「jjj」を見てください。青色にしたいのです。
しかし、次のようなものが欲しいです。
ターミナル経由でファイルを編集することは可能ですか？特定の言語に割り当てられたデフォルトの色を変更できますか？
検出された言語はサイト設定 highlighted languages を通じて行われます。
Swift はデフォルトでリストに含まれますが、meta には含まれません。
このサードパーティライブラリでサポートされている言語はここにリストされています。
編集：こちらで説明されているように 
@PrettyGirl、Markdown のヒント：コードを 3 つではなく 4 つのバッククォートで囲むことで、コードブロックからバッククォートをエスケープできます 
``` swift
[code here]
```
「いいね！」 2
こんにちは 
このテーマコンポーネントで色を変更することもできます 
「いいね！」 4
ヒントとリンクをありがとうございます。しかし、サイトの設定 highlighted languages には swift が含まれています。ハイライトされますが、現在のハイライトの色は気に入っていません。他に方法はありませんか？ discourse フォルダ内の highlight.js を編集するなど。方法があるはずですよね。highlight.js もオープンソースであることに気づきました。
Discourse はデフォルトで highlight.js を同梱していますか？
ああ、すみません、トピックを読み間違えました 
はい
「いいね！」 1
あなたの最後のメッセージで投稿されたテーマコンポーネントを試しましたか？
「いいね！」 1
なぜなら、他のテーマを適用した場合、ディスコースアプリ全体で他のどの領域がどのように異なるようになるのかわからないからです。現在の見た目と設定は気に入っていますが、いくつか問題があるだけです。テーマを変更することで、コードブロックが見やすくなるだけでなく、他の外観や設定なども変更されるのであれば、それは価値がありません。私はその特定の問題を修正するだけでいいのです。
コード言語を個別に指定し、上記の投稿で言及されているように自動言語検出をオーバーライドできます。
Swiftを対象にしたい場合は、.language-swift クラスを使用できます。より具体的には… code.hljs.language-swift。CSSでSwiftの色を変更できます。
これを調べたところ、Xcodeテーマに近いようです。しかし、スクリーンショットのコードの色に合わせて、これら2色を変更します。
これらの色の問題は、ダークモードで読み取りにくいことです。そのため、highlight.js デモページでは背景が白になっており、Discourseがデフォルトの汎用的な色の組み合わせを言語に使用している理由もこれだと思います。過去にダークモードでの読み取りにくさなどに関する報告があったと記憶しています…
Swiftのみに変更するには、新しいテーマコンポーネントを作成するか、既存のコンポーネントにこれを追加する必要があります。注意: これらの色はダークモードでも使用されます（白い背景など）。ダークモードで異なる色を使用したい場合は、新しい色の定義 dark-light-choose() を作成する必要があります。
共通 / CSS
code.hljs.language-swift {
background: #fff;
color: #000;
.xml .hljs-meta {
color: silver;
}
.hljs-comment,
.hljs-quote {
color: #007400;
}
.hljs-attribute,
.hljs-keyword,
.hljs-literal,
.hljs-name,
.hljs-selector-tag,
.hljs-tag {
color: #aa0d91;
}
.hljs-template-variable,
.hljs-variable {
color: #3f6e74;
}
.hljs-code,
.hljs-meta .hljs-string,
.hljs-string {
color: #c41a16;
}
.hljs-link,
.hljs-regexp {
color: #0e0eff;
}
.hljs-bullet,
.hljs-number,
.hljs-symbol,
.hljs-title {
color: #2b75a6;
}
.hljs-meta,
.hljs-section {
color: #643820;
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-params,
.hljs-title.class_,
.hljs-type {
color: #442fa1;
}
.hljs-attr {
color: #836c28;
}
.hljs-subst {
color: #000;
}
.hljs-formula {
background-color: #eee;
font-style: italic;
}
.hljs-addition {
background-color: #baeeba;
}
.hljs-deletion {
background-color: #ffc8bd;
}
.hljs-selector-class,
.hljs-selector-id {
color: #9b703f;
}
.hljs-doctag,
.hljs-strong {
font-weight: 700;
}
.hljs-emphasis {
font-style: italic;
}
}
前
後
「いいね！」 5
Theme component は、既に使用している Theme に追加されます。そのため、全体の外観が変わるのではなく、特定のものが追加または変更されます。したがって、カスタムコードコンポーネントはコードの外観のみを変更します。
「いいね！」 5
説明には、コードブロックのみを変更すると記載されており、まさにあなたがやりたいことです。
他の人が提案したテーマの仕組みに関するリンクを読んでください。
「いいね！」 3
素晴らしい、どうもありがとうございます。うまくいきました
「いいね！」 1
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.