メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • Drupal8:(Syntax Highlighterで)ハイライトされたテキストの改行タグ(<br>)が自動的に追加された対応

Drupal8:(Syntax Highlighterで)ハイライトされたテキストの改行タグ(<br>)が自動的に追加された対応

SyntaxHighlighter導入後にハイライトされたテキストに改行タグ(<br>)が自動的に追加されました

  • Drupal バージョン:8.6.x
  • Drupal8では、CKEditorがコアーに入ています。インストールする必要はありません。
  • モジュール:Syntax Highlighter導入します
  • Syntax Highlighter設定を変えずに、ハイライトされたテキストに改行タグ(<br>)が自動的に追加されました
    Syntax Highlighterされたテキストに改行タグ(<br>)が追加された

原因:テキスト関連のフィルター設定にある「改行をHTMLに「変換」

  • よく調べたが、原因はテキスト関連の設定にあります
  • ホーム » 管理 » 環境設定 » コンテンツ作成 » Text formats and editors でのテキスト関連設定画面にある「有効なフィルター」を確認します
    • 「改行をHTMLに変換(たとえば、<br> や <p>などに)」項目がチェックされたかを確認します
      改行に関してテキスト関連設定
    • もし、チェックされた場合に、この項目のチェックを外します
  • 上記項目のチェックを外したら、テキストの表示が正常に戻ります

Syntax Hightlightのコード表示乱れ

問題点:

  • サイトのテーマを変更して、いつの間にかにSyntax Hightlighterのソースコード表示が乱れています。入力したソースコードが単語単位で改行されてしまいまして、ソースコードが全然まともに表示されていないです。

原因

  • いろいろチェックしたところで、Syntax Hightlighterのあるタグ「code」がほかのcssに定義されてソースコードの表示が乱れてしまったことを分かりました。

解決方法

  • 上記codeタグのstyleを再定義します
  • サイトのcssファイル(style.css)に一行を追加します:
    .syntaxhighlighter code{
        display: inline !important;
    }

 


Drupal8のモジュール(ckEditor)にソースコードハイライトプラグイン(ckeditor_syntaxhighlight)の追加方法

Drupal8ではckEditorモジュールがコアーに入っている

  • Drupal7ではリッチテキストエディターを必要な時に、WYSISWYGモジュールか、ckEditorモジュールなどをインストールする必要があります
  • Drupal8ではckEditorモジュールがコアーに入っているので、インストールする必要はありません
    • ckEditoのプラグイン、ボタンを追加するには、Drupal7と比べると、ちょっと面倒な作業があるようです

ckEditoにソースコード・ハイライト(syntaxhighlight)プラグインをインストールします

  • ckEditoのソースコード・ハイライト(syntaxhighlight)モジュール:CKEditor Syntax Highlighter
  • モジュール(CKEditor Syntax Highlighter)が三つの部分を依存しています
    • CKEditor Syntax Highlight plugin
    • Drupal Libraries module
    • Drupal Syntax Highlighter module
  • モジュール(Drupal Syntax Highlighter module)を通常にインストールします
    • syntaxhighlighterの本家からjsライブラリをダウンロードします
    • jsライブラリ(syntaxhighlighter)をdrupal/libraries/syntaxhighlighterに展開します
      • shCore.js がdrupal/libraries/syntaxhighlighter/scriptにあることを確認します
  • 通常のインストール方法でモジュール(Libraries)をインストールし、有効化します
  • プラグイン(CKEditor Syntax Highlight plugin)をgitHubからダウンロードします
    • ダウンロードされたプラグインをdrupal/libraries/ckeditor_syntaxhighlightの配下に配置します
    • プラグイン(plugins)ディレクトリはdrupal/libraries/ckeditor_syntaxhighlightの下にあることを確認します
      ckeditor_syntaxhighlightプラグイン
    • このプラグインのインストール方法はあまり詳細に説明されていなくて、戸惑うことが多いでしょう。

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads