ハイライター コンポーザー ボタン

テーマコンポーネント
1
:information_source: 概要 Discourseコンポーザーのツールバー用のテキストハイライターボタン
:eyeglasses: プレビュー ビデオデモ
:hammer_and_wrench: リポジトリ GitHub - denvergeeks/discourse-highlight-wrap-theme-component: A Text Highlighter Button for the Discourse Composer Toolbar
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者の方へ Discourseテーマ使用の初心者向けガイド

このテーマコンポーネントをインストール

ボタンはハイライターペン trông しています… discourse-highlighter-button これは、コンポーザーのツールバーのボタンをクリックして <mark>this</mark> を挿入するための、非常に特定かつ限定的な目的のためです。

:information_source: ボタンをクリックする代わりに、キーボードショートカット Ctrl-H を使用できます。

設定では、ハイライター（背景）の色と、ハイライトされた部分のテキストの色を上書きできます。

discourse-highlighter-tc-settings
discourse-highlighter-tc-settings1542×872 53.2 KB

この件にご協力いただいた @pfaffman、@merefield、@Lilly、@JammyDodger、@Canapin には大変感謝いたします！

「いいね！」 14
2

素晴らしいですね。よくできました :clap:t2: :star_struck:

「いいね！」 3
3

これはとても良いですね。

.d-wrap はどこで定義されていますか？
デフォルトのテーマでは私のものにこの色で表示されます…あなたの動画のようにハイライターの色にしたいのですが、よろしくお願いします。

image

4

使用しているテーマのパレットにある --highlight-medium カラー変数設定のようです。

私のパレットの1つは以下のようになっています。

color_palette
color_palette893×721 89.7 KB

このコンポーネントは、ハイライトカラーの中間色を使用しています。管理設定（styleguide enabled または styleguide admin only）で有効にしている場合は、スタイルガイドで正確な色を確認できます。テーマカラーのスタイルガイドは /styleguide/atoms/colors にあります。

「いいね！」 2
5

ハイライトカラーの上書きに関するPRまたは提案を出す価値があるかもしれません。:slight_smile:

「いいね！」 2
6

はい、設定があった方が良いと考えていました。

「いいね！」 2
7

設定を追加しています… すぐに戻ります

「いいね！」 1
8

マークアップを使用すると、カラーパレットの「ハイライト」カラーが使用されるため、より期待どおりになるのではないでしょうか。

マークアップ

「いいね！」 3
9

OK、デフォルトで#ff8になるように設定しました。

「いいね！」 1
10

ハハ、プルリクエストを出そうとしていたところです :slight_smile:

11

Happy Super Hero Girls GIF by DC

12

素晴らしい、ちょうどプルしました、うまく動作します！:grinning:

「いいね！」 2
13

Hi @denvergeeks :slight_smile:

Here’s how your style differs (with default settings) from <mark> (which uses a Discourse’s colors variable, making it readable whatever color scheme you chose):

image
image191×125 6.78 KB

On a dark theme:

image
image185×123 6.79 KB

「いいね！」 3
14

Perfect @Canapin、それを組み込みます！

または、誰かがそれをQPRしたい場合はお知らせください。今日中にできないかもしれません。

15

これで、@Canapin の提案を使用して、組み込みの <mark> と対応する CSS の既定値を使用するようになりました。

また、ハイライター（背景）の色と、ハイライトされた部分のテキストの色の両方をオーバーライドするための設定も提供されるようになりました。これは、@Lilly による条件付き CSS のおかげです。

「いいね！」 1
16

JSONカラーピッカーを作成しようとしていますが、うまくいきません。保存ボタン付きの空のポップアップが表示されるだけです。:woman_facepalming:t2:
もしかしたら、JavaScriptで実現できる方法があるか見てみます。カラーパレットとバッジインターフェースにはcolor-picker js関数がありますが、プラグインでのみ機能するかもしれません。

「いいね！」 1
17

私にとっては、それらの設定は上書きではありません。それらは入力されなければなりません。そうしないと、何も機能しません。

そして…デフォルトのテーマを使用しており、朝のコーヒーが足りないためスローモードになっています。テーマ自体から来るものかどうか確認しませんでした。

編集：いいえ、テーマや配色はその役割を果たしません。したがって、配色に従って上書きされるのか、それとも必須の設定なのか？

18

コンポーネントを更新してページを更新してみてください。エラーを再現できません。

<mark></mark> タグを挿入していますか？

19

最初に更新してから試しました。いいえ、wrapを使用しています。少し遅れているのでしょうか？

20

テーマ/コンポーネント内のカラーピッカーの JSON 設定は、Discourse では機能していません。
テーマやコンポーネントで任意の色を選択するのではなく、一般的に Discourse のカラー変数を使用するのが良いプラクティスだと思います。そうすれば、ユーザーが選択した他のテーマや色に応じて、うまく調和しないことはありません。

以前、あるユーザーがコンポーザー用のカラーピッカーを作成しましたが、コードが公開されたかどうかは定かではありません。

「いいね！」 2