プログラミングなどの技術記事を書く際に欠かせないのが﹁ソースコード﹂の表示です。極端な話、エンジニアであれば、文章を読まなくても見出しとソースコードさえ追えば、ある程度の内容がわかってしまうものです。従ってブログでのソースコードの見せ方には一工夫加えてこだわりたいところですね。当ブログでも技術系の記事をよく書くのでソースコードをよく扱っています。先日、当ブログのソースコード周りを見直しました。今回は当ブログのソースコードの表示で使っているテクニックをいくつか紹介します。 現在の当ブログのソースコードの表示は以下のようになっています。 import React from 'react'; export default class Code extends React.Component { constructor() { super(); state = { value: null, };
![技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog](https://cdn-ak-scissors.b.st-hatena.com/image/square/27a4d132c166c18d6264b08ceae0bbc4d8839913/height=288;version=1;width=512/https%3A%2F%2Fmae.chab.in%2Fwp-content%2Fuploads%2F2016%2F12%2Fmonokai-1024x501.png)