Web・デザイン

wordpress上でPre要素で ソースコードを行番号付きでエディターのように表示する

<pre>タグは、テキストを半角スペースや改行をみやすいようにそのまま表示する際に使用します。
<pre>~</pre>で囲まれた範囲のソースに適応します。
特にHTMLソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。

  1. WordPresで実現する。(独自jQueryやCSSは functions.php やプラグインで実装する。)
  2. 対象となる<pre>タグをクラス名 code 及び list-xxxx とする。
  3. jQueryで<pre>~</pre>内の文章を取得し行毎の配列に分解する。
  4. 取得した行毎の配列を<ol>: 順序付きリスト要素に変換する。
  5. CSS 表示は codeクラスに対応した表示とする。
  6. CSSにて 行毎に背景色を交互に変更する。
  7. テーマによっては<pre>タグをカスタマイズしている場合があるのでそれぞれリセットしたりして調整する必要がある。

jQuery コード

CSS コード

最近の記事

  1. EC-CUBE 4.0 インストール
  1. プログラミング

    python Anacondaを利用した開発環境の整備 jupter Noteb…
  2. Web・デザイン

    Illustrator ショートカットデータベース、カテゴリー別絞り込み 、マウ…
  3. Raspberry PI

    RaspberyPi 4B によるローカルネットワークドライブ、共有フォルダーを…
  4. プログラミング

    [python] Django ローカル環境にインストール サンプルアプリケーシ…
  5. プログラミング

    郵便番号データベースで多対多のリレーション
PAGE TOP