インラインコードブロックのスタイルを変更して、より目立たせる

Teams のお客様から、インラインの コードブロック がもっと目立つようにしてほしいとの要望がありました。現在、ダークモードでもライトモードでも、コードブロック の色は他のテキストとあまり変わらず、目立ちません。Discourse のデフォルトでテキストの色を変更し、もっと目立つ色、例えば赤色を使用することは可能でしょうか?

ほとんどのお客様にとっては、これは大きな問題ではありません。なぜなら、サイトの CSS を変更するようにテーマをカスタマイズできるからです。しかし、Discourse for Teams では、このレベルのカスタマイズはできません。一方、コードについて議論するチームにとっては、他のテキストとは大きく異なるように目立つことが非常に重要です。

「いいね!」 2

トビアスさん、ありがとうございます。参考までに、私は顧客であり、インラインブロックについてのみ話していることを強調したいと思います。複数行については懸念はありません。

「いいね!」 2

はい、複数行ブロックは非常にクールです。

テキストを強調表示する他の方法もありますが、明らかにバックティックが最も迅速です。

「いいね!」 2

参考までに、私のようなHTML初心者(検索する必要がありました)のために:

  1. Fancy!Fancy! で作られています
  2. Ohhhh!Ohhhh! で作られています

知っておくと便利ですね、@tobiaseigen さん、ありがとうございます。
this のCSSも調整した方が良いと思います。バッククォートを多用する技術的な投稿がいくつかあり、2つの代替案を使用するのはユーザーフレンドリーではありません。

「いいね!」 3

次回のヒント:やり方を知りたい投稿を引用するだけで、それを見ることができます。

「いいね!」 3

申し訳ありません!通常はトリックを明かすのですが、携帯電話で急いでいたためできませんでした。

投稿がどのように作成されたかを確認するためのもう1つの便利なトリックは、生のURLを使用することです。例:https://meta.discourse.org/raw/57255/7

「いいね!」 4

ああ、 nice なハイライト方法がもう一つあって、よく忘れてしまうんだ。 \u003cmark\u003eこんな感じになるよ\u003c/mark\u003e で、これは \u003cmark\u003etext\u003c/mark\u003e というHTMLマークアップで実現できる。コミュニティが提供するテーマコンポーネント(Teamsでは利用不可)を使うと、代わりに ==text== を使うことができて、これはかなり便利だ。なぜかすぐに見つからないんだけどね。

でも、とにかく、コードブロックのデフォルトスタイルを更新して、もっと分かりやすくする方法について同僚と話し合うよ。コードブロックの背景色をより特徴的なものにするだけでも十分かもしれない。

「いいね!」 3

コアのインラインコードブロックを変更するPRはこちらです: PR: Inline code block styling edits by jordanvidrine · Pull Request #16394 · discourse/discourse · GitHub

「いいね!」 6

申し訳ありません。いったんロールバックします。

「いいね!」 3

インラインコードは、常にコード(等幅)フォントで通常のコードのように表示されてきました。非常に明るく、不快なものはコミュニティに大きく依存し、ウェブ上のほとんどの場所で code が使用されている方法とは一貫性がありません。

構文ハイライトの問題は異なります。どの構文を扱っているかを判断するには、複数行のコードが必要です。おそらくそれが問題の根本でした。構文ハイライトが必要な場合は、コードのブロックが必要です。たとえば、次のようになります。

var x, y, z;  // 3つの変数を宣言
x = 5;    // xに値5を代入
y = 6;    // yに値6を代入
z = x + y;  // xとyの合計をzに代入

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";

単一の code 要素は、構文ハイライトに必要なすべてのコンテキストから切り離されています。ただし、単一行のJavaScriptは実行できます。

"the value of z is " + z + ".";

これは次のように表示されます。

``` javascript
"the value of z is " + z + ".";
```

したがって、これはコードブロックコードの単語の違いに関するものだと思います。

「いいね!」 3

@jordan.vidrine さん、指示は明確ですね。変更を完全に元に戻してください。インラインコードを赤くする「代替コードスタイル」のテーマコンポーネントを作成することもできます。コンポーネントですから、何でもできます。

「いいね!」 3

この最近のイテレーションは、Metaでアクティブになっていたテーマコンポーネントであり、実際的な変更ではなかったため、無効にしました。

「いいね!」 4

この変更は結構です。:+1:

ここでの要望は、ディスカッションでテキストを簡単にハイライトする方法だったと思います。多くの人(私も含めて)は、バッククォートを使ってテキストをハイライトするようになりました。なぜなら、それは非常に簡単で、シフトキーを押す必要もなく、メニューから見つけやすいからです。しかし、段落の他のテキストとはあまり区別がつきません。

太字やイタリック体もメニューにありますが、あまり目立ちません。インラインでテキストをハイライトする他の方法では、より多くのキーストロークが必要です。また、それらは目立つように文書化されていないため、内部知識も必要とします。

私の知る限り、これらが最良の方法です。

ボタン <kbd>ボタン</kbd>
緑の下線 <ins>緑の下線</ins>
赤の取り消し線 <del>赤の取り消し線</del>
ハイライト <mark>ハイライト</mark>
取り消し線 <strike>取り消し線</strike>

プラグインをインストールできる人には、公式のDiscourse BBCode colorプラグインがあります。プラグインをインストールできない人には、@merefieldがDiscourse Coloured Text

==highlight==<mark>highlight</mark> に変換するテーマコンポーネントも気に入っていましたが、ここではmetaでその追跡を失いました。

「いいね!」 3

これは現時点ではプラグインで行う必要があります。クライアントサイドの変換だけでなく、HTMLに焼き付ける必要があるためです。

https://markdown-it.github.io/ を見ると、markdown.it では非厳密モードでデフォルトで有効になっているようですが、@Vitaly さんどうでしょうか?

「いいね!」 3

興味深い。説明ありがとうございます。

今日、Plugin カテゴリをスクロールしているときに、偶然にもこれを行うプラグインを見つけました。キーワードを検索してもプラグインが見つからない場合があるというのは面白いですね。:rofl:

「いいね!」 2

なるほど…ルート実装はここにあります:

「いいね!」 1

現在のコードブロックのデザインには、コントラストがほとんどないという明確なUXの問題があると思います。

@codinghorrorの言葉を借りれば、「ウェブ上のほとんどの場所」ではこの問題は見られないと言えるでしょう。

GitHubをご覧ください。

Slackをご覧ください。
image

Notionをご覧ください。
image

「緑色の下線」と「ハイライト」は、不必要なほど高いコントラストという、その逆の問題を抱えていると主張しますが、それはUXの問題というよりは好みの問題でしょう。

GitHubのアプローチを採用し、より暗いグレーの背景とパディングを実装するのはどうでしょうか。

「いいね!」 2

複雑になるのは、現在のマイルドなスタイリングに慣れている多くのインスタンスで、あらゆるDiscourseインスタンスに大規模な変更を提唱することです。これは大きなチーズムーブです。

CSSを追加するだけで済む回避策は、ほとんどのインストールで既に存在します。

「いいね!」 1