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. EC-CUBE 4.0 インストール

    サーバー環境

    EC-CUBE4 を CentOS7、LAMP環境整備及インストール
  2. プログラミング

    テキストを流れるように表示するjQueryプラグイン「jQuery.Marque…
  3. サーバー環境

    Centos7 nginx(with ssl let’s Encry…
  4. プログラミング

    Django Webアプリケーションの構築 Nginxで公開 Mysqlに接続す…
  5. 趣味・実用

    Mac トラックパッド 3本指 ドラッグ
PAGE TOP