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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. プログラミング

    Django Webアプリケーションの構築 データベースの内容一覧表示 およびア…
  2. Raspberry PI

    RaspberyPi 4B によるローカルネットワークドライブ、共有フォルダーを…
  3. 趣味・実用

    Mac トラックパッド 3本指 ドラッグ
  4. サーバー環境

    Aws EC2 Apache + Mysql + php7 構築の記録
  5. Ubuntu nginx SSL

    サーバー環境

    ubuntu nginx SSL Webサーバー構築
PAGE TOP