WEBEER – Web制作の覚えがき –

【Javascript】WPのソースコードにQiitaライクなファイル名を表示する

Javascript
Javascript 更新日:2020.08.14 公開日:2020.08.14

Qiitaのコードのファイル名の表示の仕方ってコンパクトで可愛いですよね。WordPressで再現できないかなと思って試してみました。

やりたいこと

ファイル名を表示したい

方法

できるだけ少ない労力で表示できるようにしたいと思ったので、WPのブロックエディターに標準装備されている「高度な設定」でCSSクラスを追加して対応することにしました。

また、脱jQueryを視野に入れてJavascriptで作ることにします。

・WPでCSSクラスを追加する
・jQueryは使わない

Javascriptを書く

CSSクラス名は、表示したいファイル名の左にfilename:とつけることにします。

<pre class="filename:main.css">...</pre>

javascriptでfilenameを持っているエレメントを取得してファイル名を抜き出し、spanの中にセットして出力する。

// filename を持つエレメントを取得する
preList = document.querySelectorAll('[class*=filename]');

// 取得したエレメントをループして1件ずつ処理
preList.forEach(function(val) {

  // エレメントからfilename:をもつクラス名を取得する
  file = val.className;
  file = file.match( /filename:(.*)/ );

  // 表示のためのspanを作る
  newElement = '<span class="filename">' + file[1] + '</span>';
  // 先ほど作ったspanをpreの直後に出力する
  val.insertAdjacentHTML('AfterBegin', newElement);
});

これを実行するとHTMLは下記のようになってるはずです。

<pre>
  <span>main.css</span>
  <code>
    ...
  </code>
</pre>

javascriptはこれで終わり。

スタイルを書く

javascriptで作ったspanにスタイルをつけてやります。

pre {
  &[class*=filename] {
    position: relative;
    code {
      padding-top: 35px;
    }
  }
  .filename {
    line-height: 1;
    position: absolute;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    background: rgba(355, 255, 255, .2);
    padding: 5px;
    left: 50px;
    top: 0;
  }
}

セレクタを[class*=filename]と書いてやると、filenameから始まるセレクタ にスタイルをつけることができます。

あとはpositionで好きな位置に配置し、ファイル名があるときだけ上に余白をつけてやれば完成です。

終わりに

ファイル名が表示されているとみ易くて良いですよね。