MENU

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

目次

導入の仕方

当サイトは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はなぜかない??)

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
Subscribe
Notify of
guest

CAPTCHA


0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
目次