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. プログラミング

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

    python Django Webアプリケーションの構築 基本編
  3. プログラミング

    天気予報RSSをsimplexml_load_fileでパースする。
  4. ubuntu 20.04 nginx php mysql Webサーバー環境整備

    サーバー環境

    ubuntu 20.04 nginx php mysql Webサーバー環境…
  5. サーバー環境

    centos7 + Apache2.4 + Mysql5.7 + Php7.0 …
PAGE TOP