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. サーバー環境

    wordpress メールをSMTP経由でのメール送信するように変更する
  2. プログラミング

    CentoOS7 python3 CGI Mysqlデータベースを扱う
  3. プログラミング

    郵便番号データベースで多対多のリレーション
  4. プログラミング

    Django Webアプリケーションの構築 Nginxで公開 Mysqlに接続す…
  5. プログラミング

    Mac Windows にpython の最新バージョンをインストール
PAGE TOP