Codeblockテーマピッカー

:discourse2: 概要 Codeblock Theme Picker を使うと、コードブロックで使用するテーマを簡単に切り替えることができます。
:eyeglasses: プレビュー Discourse Theme Creator でプレビュー
:hammer_and_wrench: リポジトリリンク https://github.com/discourse/hljs-theme-picker
:open_book: Discourse テーマは初めてですか? Discourse テーマの使い方入門ガイド

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

機能

これは利用可能なオプションのごく一部に過ぎません。このコンポーネントには、hljs リポジトリで提供されている 全 90 のオプション が含まれています。

:information_source: すべてのオプションがこのコンポーネントに含まれていますが、選択した 1 つのみが読み込まれます。そのため、オーバーヘッドは発生しません。

使い方

このコンポーネントの仕組み上、サイトの設定を少し変更する必要があります。

  1. your.site.com/admin/site_settings/ にアクセスします
  2. theme_authorized_extensions を検索します
  3. そのリストに css を追加します。

次のように設定します:

:warning: コンポーネントをインストールする前にこれを行う必要があります。そうしないと動作しません。

これが完了したら、他のコンポーネントと同様にインストールできます。

設定

名前 説明
hljs theme コードブロックで使用するテーマを選択します。hljs のデモページ にアクセスしてテーマをプレビューできます
hljs dark match 利用可能な場合はダークカラーテーマを読み込みます

オプションの見た目を確認する必要がある場合は、こちら We're not a CDN - highlight.js をご覧ください

使用する hljs テーマを決めたら、ドロップダウンから希望のものを探して設定を保存します。すべての機能が機能し始めるまで、ページを再読み込みする必要があります。

クレジット

このコンポーネントに含まれているすべての hljs テーマには、それぞれのファイルに著作権情報が記載されています。すべての作者 (:heart:) のリストはここで紹介するには大きすぎるため、こちら で確認できます。


:discourse2: 当方でホストされていますか? テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

「いいね!」 42

このテーマは非常に役立ち、長期間当サイトで使用していましたが、突然 Firefox で問題が発生することに気づきました。カスタム CSS ファイルが X-Content-Type-Options: nosniff ヘッダーによってブロックされています。コンソールによると、CSS ファイルの MIME タイプが text/html として表示されています。どのテーマを選んでも Firefox ではこの問題が発生しますが、Chrome では問題ありません。

このスーパーテーマコンポーネントは、選択されたコードブロックのスタイルをユーザー設定として選択可能にすれば、さらに良くなるでしょう。

「いいね!」 5

同意します。ユーザー設定が実装されるととても素晴らしいでしょう。

行番号を表示する方法はありますか?

素晴らしいテーマコンポーネントですね。

一つ質問ですが、highlight.js デモには 242 のテーマがあります。例えば、添付画像の「Github Dark Dimmed」などです。

この問題を解決する方法はありますか?アドバイスをお願いします。

残念ながら、これは少し複雑です。

Discourse は highlight-js のバージョン 10.6.0 を実行しています。現在不足している追加テーマのほとんど(base16 など)は、バージョン 11.0 が必要です。

問題は、そのバージョンが破壊的変更と非推奨を導入していることです。こちらをご覧ください。

つまり、現在の選択肢はしばらく変更されないことになります。まず、Discourse の tests-passed で highlight-js のバージョンを更新する必要があります。その後、安定版リリースを待つ必要があります。テーマ(現在のものさえも)を更新すると、テーマがあなたのサイトで正しく機能するかどうかを推測するしかないという悪い状態に陥ってしまいます。

「いいね!」 4

このコンポーネントは最新のベータ版で壊れているようです。インストールすると、ハイライトが正しく機能しなくなります。テーマからコンポーネントを削除したところ、再び機能するようになりました。ハイライトテーマを選択できなくなっただけです。

「いいね!」 2

最新のベータ版でも、ここでも構文の色付けが壊れていることを確認してください

@Falco がこのコンポーネントの修正をマージしました: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

これには、highlight.js バージョン 11 テーマのアップデート(コアも highlight.js バージョン 11 に更新 されました)と、正しい特定性を欠いていたスタイルの修正が含まれています。

「いいね!」 2

コンポーネントをインストールしようとしたときに、このエラーが発生しました。

Error creating upload asset: a11y-dark. Original filename アップロードしようとしたファイルは承認されていません(承認された拡張子: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js)。

この部分をやりましたか?:point_down:

「いいね!」 1

うわー、それはやりますね :hugs:

「いいね!」 1

このテーマコンポーネントを見つけました。存在してくれて本当に嬉しいです!設定の hljs dark match が機能していないようです。

例えば、hljs themeatom-one-light に設定しているとします(atom-one-dark も存在します)。

リフレッシュすると、ダークモード時に atom-one-light が適用されますが、ダークモードに切り替えてもコードブロックはダークモードに切り替わらず、ライトモードのままです。


テーマコンポーネントをインストールした際にこのエラーメッセージが表示されました。コミュニティの皆さんに修正方法を教えていただけると幸いです。

css を許可されたテーマ拡張機能のリストに追加しましたか?

「いいね!」 1

ありがとうございます、うまくいきました^^

「いいね!」 1

注:

以下のようになっているべきです:

このテーマコンポーネントは最新バージョンで動作していないようです。

すでに theme_authorized_extensions 設定に css を追加し、コンポーネントの再インストールも試みましたが、コードブロックのスタイルが適用されません。

ご確認いただけますでしょうか。ありがとうございます。