プログラム・ソースコードをブログ記事に表示する方法【簡単】

ソースコードプログラムイメージ画像

 

この記事では、プログラム・ソースコードをブログの記事上に簡単に綺麗に表示する方法をご紹介します。

ソースコードをブログの記事上に表示する方法「GitHub」の「Gist」使用 

ソースコードをブログの記事上に表示する方法は他にもあるようですが、この方法が私には簡単にできましたのでご紹介したいと思います。

現時点で私が選んだのは、「GitHub」という世界中の人々が自分の作ったデザインデータやプログラムコードなどを公開し保存ができるウェブサービスの中の「Gist」というサービスの一つを使って、私のブログ記事へ表示する方法を選びました。

GitHub

GitHub

GitHub is where people build software. More than 83 million people use GitHub to discover, fork, and contribute to over 200 million projects.

「GitHub」へはメールアドレスの登録が必要になりますが無料で使うことができます。

使い方はシンプルで、あなたがブログ記事へ表示したいプログラムソースコードをGitHubの画面へ貼り付けて、ファイル名とあなたの表示しようとしているプログラム・ソースコードのファイル形式を選び「Creat Public Gist」というボタンをクリックするとサイトやブログなどへ貼り付ける為のスプリクトタグが自動で作成されます。

 

GitHubGistのサンプル画像01

 

GitHubGistのサンプル画像02

 

上記の矢印のスプクリプトタグをあなたのブログの記事に貼り付けるだけで以下のように表示されるようになります。

上記のように簡単にプログラムソースコードが表示できるようになりました。

細かい設定などは随時このページに追記する予定です。

参考になったブログのリンク集

簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法

簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法 | SHIOMISC(シオミスク)

簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法 | SHIOMISC(シオミスク)

プログラミングの記事を書きたいな。 記事にソースコードを埋め込みたいんだけど、どうしたらいいんだろう? できればプラグイン無しでできるといいんだけど。 Wordpressのプラグインという選択肢もありますが、プラグインが増えすぎると管理が大変ですし、サイトが重くなる原因にもなります。 GitHubのGistを使うことで、プラグイン無しで簡単にソースの埋め込みができます。 この記事では、Gistを使

 

Githubのサイト Gistソースコードのリンクが作れるサイト

https://gist.github.com/

SyntaxHighlighterをダウンロードまだできるサイト「やっと見つかったサイト」

SyntaxHighlighter - Download

 

【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】

【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】

【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】

カスタマイズネタを書いていくときに、どうしてもHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterなるものを導入することにしました。色々なブログを調べるとSyntaxHighlighterでは、

WEBサイト・ブログの為のHTMLソースコード変換

undefined

undefined

undefined

undefined

関連記事