Gistを見やすくカスタマイズしてみた

こんにちは!サムです。

少し前に、ソースコードを表示する方法を調べました。
CodePenとGistの2つをソースコード表示まで一通りやってみたんですが、自分はGistの方が使いやすかったですね。

シンプルにファイル拡張子を書き込むことで、判別してシンタックスハイライトまでつけてくれるのが便利です。

CodePenは、3つのファイルとプレビューがセットになっていて、ユーザー目線ではわかりやすいのですが、コードの文字とコード入力欄が使いにくかったので選びませんでした。サイトも新規登録したばかりなのに、チュートリアル説明の間で何回も誤作動が起きたので、コードの打ち間違いがないようにと取りやめました。

個人的には、ソースコード表示はGistが一番ハードルが低いと思っています。

おまけにクラウドに保管されるため、安全に簡単に設置できるのが良いですね。

Gistの見た目

簡単にコードは表示できるのですが、見た目は↓のようになっています。

見てどう思いましたか?

「簡単なのは良いけど見た目にもこだわりたい。」「下についているハートつきのバーを隠したい。」そう思った人もいると思います。

シンプルできれいなウェブサイトには、デザインが合いませんね。

そもそも主役はソースコードなので、ハートつきのバーが目立っていいことはありません。削除して見やすくしましょう。

ここでは、↓のようになります。

カスタマイズ

CSS

参考にしたサイト

今回は、プログラミング初心者の私がコピペでできるカスタマイズを紹介しました。

このリンクは参考にした外サイトに繋がっています。
Gistをちょっと見やすくカスタマイズしてみた

自由にカスタマイズできるようになったら、自分なりにこだわった見た目をつくりたいです。

コメント