どうもどうも
皆さん、この記事を見ているということは、便利なコードを紹介する目的で、コードをブログにそのまま張り付けて失敗したことがある方々ってことですよね。
技術系ブログを書く場合、便利なコードを紹介しようとソースを書こうにも、ベタに書いてしまうとそれ自体がプログラムとして判断されてしまうため正しく表示されません。
おまけにベタで書くのってなんか見た目にもスマートじゃないですよね。
そこで今回は技術系ジャンルのブログでは欠かせない、ソースコードをブログ内に入れ込む方法をご紹介します。
ソースコードをブログ内で表示する方法
HTML変換ツール
前述の通り、コードを直接ブログに書き込むとそのままプログラムとして作用してしまいますので、今回はコードをHTMLに変換します。
変換したHTMLコードであればテキストエディタに張り付けても問題ありませんし、ビジュアル的にも良くなります。
また、変換ツールはWEB上に様々ありますが、本記事では下記のツールを使用します。
→変換ツール
掛かる工程はたったの3ステップ！
早速上記のツールを使用してソースコードをHTMLに変換しましょう。
実際に変換する
①変換ツールを開き、下記の画像の位置にコードを張り付けて「HTMLに変換」をクリック。
②左下にHTMLに変換したコードが表示されるのでコピー。
③WordPressなどの投稿画面のテキストエディタを開き、先ほどコピーしたHTMLコードを張り付けます。
以上で終了です。
確認
元のビジュアル画面で確認するとあら不思議。
しっかりとソースコードが表示されているはずです。
行番号も表示され、読者にも見やすいかと思います。
皆さんも是非ご活用ください！！