コードブロックテーマピッカー

: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テーマ コードブロックで使用したいテーマを選択します。テーマをプレビューするには、hljsデモページにアクセスしてください
hljsダークマッチ 利用可能な場合はダークカラースキームを読み込む

オプションがどのように見えるかを確認したい場合は、こちらをご覧ください 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 を追加し、コンポーネントの再インストールも試みましたが、コードブロックのスタイルが適用されません。

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