プログラム・ソースコードをブログ記事に表示する方法【簡単】
この記事では、プログラム・ソースコードをブログの記事上に簡単に綺麗に表示する方法をご紹介します。
ソースコードをブログの記事上に表示する方法「GitHub」の「Gist」使用
ソースコードをブログの記事上に表示する方法は他にもあるようですが、この方法が私には簡単にできましたのでご紹介したいと思います。
現時点で私が選んだのは、「GitHub」という世界中の人々が自分の作ったデザインデータやプログラムコードなどを公開し保存ができるウェブサービスの中の「Gist」というサービスの一つを使って、私のブログ記事へ表示する方法を選びました。
GitHub GitHub is where people build software. More than 83 million people use GitHub to discover, fork, and contribute to over 200 million projects.
https://gist.github.com/
「GitHub」へはメールアドレスの登録が必要になりますが無料で使うことができます。
使い方はシンプルで、あなたがブログ記事へ表示したいプログラムソースコードをGitHubの画面へ貼り付けて、ファイル名とあなたの表示しようとしているプログラム・ソースコードのファイル形式を選び「Creat Public Gist」というボタンをクリックするとサイトやブログなどへ貼り付ける為のスプリクトタグが自動で作成されます。
上記の矢印のスプクリプトタグをあなたのブログの記事に貼り付けるだけで以下のように表示されるようになります。
上記のように簡単にプログラムソースコードが表示できるようになりました。
細かい設定などは随時このページに追記する予定です。
参考になったブログのリンク集
簡単！ブログ記事にプログラムをプラグイン無しで埋め込む方法
簡単！ブログ記事にプログラムをプラグイン無しで埋め込む方法 | SHIOMISC(シオミスク)
プログラミングの記事を書きたいな。 記事にソースコードを埋め込みたいんだけど、どうしたらいいんだろう？ できればプラグイン無しでできるといいんだけど。 Wordpressのプラグインという選択肢もありますが、プラグインが増えすぎると管理が大変ですし、サイトが重くなる原因にもなります。 GitHubのGistを使うことで、プラグイン無しで簡単にソースの埋め込みができます。 この記事では、Gistを使
Githubのサイト Gistソースコードのリンクが作れるサイト
https://gist.github.com/SyntaxHighlighterをダウンロードまだできるサイト「やっと見つかったサイト」
SyntaxHighlighter - Download
【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】
【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】
カスタマイズネタを書いていくときに、どうしてもHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterなるものを導入することにしました。色々なブログを調べるとSyntaxHighlighterでは、
WEBサイト・ブログの為のHTMLソースコード変換
undefined
undefined
undefined
undefined
- 関連記事
-
-
【備忘録】このブログの設定について
2019/12/30
-
2020年のおすすめ副業について、結局基本はブログ？？？
2019/12/20
-
【カエテングラフ- FC2ブログ版】抜粋文の文字数の変更について
2019/12/25
-
【ブログ】記事装飾パーツまとめ
2020/04/08
-
おすすめFC2ブログテンプレート「Alternative」by Akiraさん
2021/10/06
-
【2020年】アクセス解析ツール おすすめ！！無料・有料・広告あり・なし・制限含めて選んだ結果！初心者＆中級向け
2020/01/03
-
AkiraさんのFC2ブログテンプレート"ordinary_days"
2021/08/23
-
このブログへの設定や記事を描く際のHTMLなどなどの備忘録記事です。あくまでも自分流です。
2019/12/24
-
ブログ１００記事説は本当か現在記録中！！
2019/12/20
-
