コード表示のためにCodePenを導入

2017-03-29

WordPressの記事にhtml,cssなどのコードを表示するとき、「Crayon Syntax Highlighter」というプラグインを使用していました。こんな感じです。

<script>
    
window.onload = function(){
          var canvas = document.getElementById('main-banner-h1');
          var ctx = canvas.getContext('2d');

          
//一列目
          ctx.font = 'bold 24px Meiryo';
          ctx.lineWidth = '1';
          //文字の外枠
          ctx.strokeStyle = '#555555';
          ctx.strokeText('千葉県で個人・会社向けにホームページ制作',0,30);
          //文字の塗りつぶし
          ctx.fillStyle = '#00479d’;
          ctx.fillText('千葉県で個人・会社向けにホームページ制作',0,30);
          //二列目
          ctx.strokeText('しております、市川ウェブデザインです。',0,80);
          ctx.fillText('しております、市川ウェブデザインです。',0,80);
     }

</script>

Crayon Syntax Highlighterでも綺麗に見えて満足していたのですが、今回「CodePen」を導入しました。

CodePenの良いところは、何と言っても結果が表示されることです。ソースコードとその結果が表示されるので、非常に見やすいと思います。

これがCodePenを使ったコードと結果です。

See the Pen evPLjg by Kazuhiro Maeda (@kazurou147) on CodePen.dark

Resultをクリックすると結果が表示されます（一応、Result以外のHTML,JSタグは、選択を解除してください）。

いやー、すごい便利ですね。見やすいし、使いやすいし言うことないです。これからガンガン使っていきたいと思います。