【4選】そのイカしたソースコードを表示する方法！

どうもジャングルオーシャンのミケです。

ゴリゴリコード書いてますか！

コーディングやプログラミングでソースを書いて

これいいかもっていうソースを作った時って人に教えたくなるよね

そこで今日は

そのイカしたソースを公開するために

他のブログでもよく見る

ソースコードを表示する方法を4つ紹介するよ！

• 1.海外サイト Code Pen
• 2.GitHubの機能 Gist
• 3.wordpressプラグイン Crayon Syntax Highlighter
• 4.マージナルソフトさんのツール srctohtml

それじゃ書いてくよ！

1.Code Pen

https://codepen.io/

有料プランもあるけど無料で使えるのでFREEで登録をしよう！

必要なコードを書き込んだら

コード入力画面の右下のEmbedを押して埋め込みコードを取得できるよ

あとはこれを表示したいところに貼り付けるだけ！

表示すると↓のようになるよ

2.Gist

https://github.com/

Gistを使うにはGitHubに登録していないといけないから

まだの人は登録しよう！

届いたメールから本登録が終わったら

右上の「+」の中の「New Gist」から

新しいGistを作ろう！

拡張子をつけたファイル名を入力したら

ソースコードを記入して右下の「Create public gist」をクリック！

生成されたコードをコピーして貼り付けよう！

表示すると↓のようになるよ

3.Crayon Syntax Highlighter

Crayon Syntax Highlighterはwordpressのプラグインだよ

ダッシュボードのプラグインから新規追加を選択

「Crayon Syntax Highlighter」と検索しよう

インストールが完了したら「有効化」をクリックしてプラグインを有効にしたら

ダッシュボードの設定の中に「Crayon」っていう項目ができるんだ

ここでいろいろな設定ができるよ

設定が完了したら記事を「新規作成」

記事を書いていく時のビジュアルタブの中に「<>」っていうボタンが追加されていて

テキストタブの中には「Crayon」っていうボタンが追加されているよ

それぞれこのボタンをクリックして別ウィンドウで出てきた入力欄に表示したいコードを入力して右上の「Add」をクリックすれば完了！

表示すると↓のようになるよ

4.srctohtml

srctohtmlはマージナルソフトさんのツールの一つで

登録が不要だから気軽に使えるよ

使い方はすごくシンプル！

というか丁寧に書いてくれてあるからすぐわかるねw

表示すると↓のようになるよ

1. <h1>ミケランジェロです</h1>
3. <style>
4. h1{
5.   color:#f60;
6. }
7. </style>

お好みのソースコード表示ツールはあったかな？

見た目も変更できるからいろいろ試してみてね！

それじゃまた今度ね！