【2023年5月】WordPressプラグイン「Highlighting Code Block」【テーマSwell】

2023年5月12日2023年11月7日

導入の仕方

当サイトはswellテーマを仕様しています。興味持ってくださった方は以下のリンクからご検討ください。

プラグインプラグイン「Highlighting Code Block」を検索してインストールし有効化する。

導入メリット

ブロックエディタでそのまま専用のエディタを使うことができるようになるので操作しやすい。
またダッシュボードの管理画面から設定でダークとホワイトの設定を選んだりでき、独自のスタイル設定もできるようになっている。

document.addEventListener('DOMContentLoaded', function () {
    var $tab = $('.tab2')
    var $tab__link = $('.tab2__link')
    var $tab_body_item = $('.tab2-body__item')
    $tab__link.on('click', function (e) {
      var target = $(e.currentTarget)
      //タブの中身の表示非表示
      var num = target.data('tab-body')
      $tab_body_item.removeClass('on')
      $('.tab2-body__item--' + num).addClass('on')
      //タブの表示非表示
      $tab.removeClass()
      $tab.addClass('tab2 tab2--' + num)
    })
  })  
document.addEventListener('DOMContentLoaded', function () {
    var $tab = $('.tab3')
    var $tab__link = $('.tab3__link')
    var $tab_body_item = $('.tab3-body__item')
    $tab__link.on('click', function (e) {
      var target = $(e.currentTarget)
      //タブの中身の表示非表示
      var num = target.data('tab-body')
      $tab_body_item.removeClass('on')
      $('.tab3-body__item--' + num).addClass('on')
      //タブの表示非表示
      $tab.removeClass()
      $tab.addClass('tab3 tab3--' + num)
    })
  })

document.addEventListener('DOMContentLoaded', function () {
    var $tab = $('.tab4')
    var $tab__link = $('.tab4__link')
    var $tab_body_item = $('.tab4-body__item')
    $tab__link.on('click', function (e) {
      var target = $(e.currentTarget)
      //タブの中身の表示非表示
      var num = target.data('tab-body')
      $tab_body_item.removeClass('on')
      $('.tab4-body__item--' + num).addClass('on')
      //タブの表示非表示
      $tab.removeClass()
      $tab.addClass('tab4 tab4--' + num)
    })
  })


$(function(){
  $('a[href^="#"]').click(function(){
    //スクロールのスピード
    var speed = 500;
    //リンク元を取得
    var href= $(this).attr("href");
    //リンク先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    //リンク先までの距離を取得
    var position = target.offset().top;
    //スムーススクロール
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

HTMLからC++、C#、Ruby、PHP、pythonなど11言語のハイライトが用意されているので使いやすそうです。
(Javaはなぜかない？？)