市川ウェブデザイン

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

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

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

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

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

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

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

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