以前の記事でAtom使ってマークダウンで記事書けばすっごい楽！ということを書きましたが、色々試しているうちにどうやらマークダウンだけでは少々問題がありそうだったので、主な問題とその解決方法について書いていきます。
まぁタイトルから既に分かるとは思うので、先に結論だけ共有しておくと結局cssやhtmlを使うことになりました。
ので、今回は ブログ初心者である自分がどのような問題に直面し、どのように対応したかをまとめていきます。
マークダウンのみの課題
前提として、正直なところマークダウンが悪いというより、自分がウェブページの装飾について無知なのが原因な気がしなくもないです…。
なのでこれから話す内容は「マークダウンでもできるよ！」とか「設定が悪いだけだ！」とかかも知れませんが、ご了承ください。
ソースコード等の特殊な文章の見せ方
ブログのテンプレートデザインのみを使用した場合、パット見デザインもよく、正直文字サイズや色を変更するだけでも良いかなと思っていました。
ただし箇条書きだったり、特にソースコード等特殊な文章を記事内に記述する場合、正直あまり見栄えが良いとは言えない状態でした。（ここに関しては自分が選んだ ブログテンプレートや、Atomのマークダウン設定の問題かもしれませんが…。）
たとえばですが、私が使っていたブログテンプレート上を使用し、Atomでマークダウン記述してからhtmlとして出力した文字列をそのまま記事にした場合、以下のような見た目になります。
これ実はソースコードを貼っているのですが、 普通の文章 に紛れ込んだみたいになってしまっています。正直見づらいしどこからどこまでがソースコードなのかも分からないです。
技術ブログを始めようと思った手前、流石にソースコードが見づらくては意味がない 。というのが今回htmlを書こう！と思ったきっかけです。
解決方法
今回私が導入したのは以下の3点です。
- Atomでhtmlを書きやすくするためのプラグイン導入
google-code-prettifyの導入- cssファイル等のアップロード用に
GitHub.ioの登録
それでは、一点づつ何をしたかを追っていきます。
Atomでhtmlを書きやすくするためのプラグイン
Atomは色々プラグインを導入し、カスタマイズするタイプのエディターなのですが、今回は以下の３つのプラグインのみ導入してみました。というより、色々と選択肢が多すぎたため、まずは試しに３種類だけ導入してみたというのが正しいですが…。
- atom-html-preview
- tabs-to-spaces
- tag
atom-html-preview
Ctrl+Shift+Hでhtmlプレビューが見れるようになるすぐれもの。特にhtmlに不慣れな見としてはちゃんとタグが動いているか、どのようになるのかなどがリアルタイムで確認できるので重宝しています。
tabs-to-spaces
ソフトタブ信者として必須と思い、迷うことなく入れました。機能としては単純に強制的にソフトタブに変換してくれるもののようでした。また、ちょっと変わった要素として「保存時にタブ形式を一括変換する」設定もありました。
tag
何はともあれ入れるべきプラグインだと思います。機能はシンプルにAlt+Cmd+.で自動的にクローズタブを入れてくれます。自分みたいにタグに慣れていない人間や、 少しでも書く手間を減らしたい人間にとってまず間違いない便利プラグインだと思います。これから色々とプラグインを入れたり外したりしていくと思いますがこのプラグインだけは ずっと使い続けると思います。そう思わせてくれるほど便利なプラグインです。
google-code-prettifyの導入
正直なところ、まだ上手く使えていませんが、導入方法は至ってシンプルでした。
- google-code-prettifyをダウンロード。
- ダウンロードはこちらの公式サイトからどうぞ : https://code.google.com/archive/p/google-code-prettify/downloads
- Bloggerテンプレートのhtmlを開き、Header内に
run_prettify.jsを参照する処理を記述。
上記２点を行うだけで、以下のようにソースコードがわかりやすく表示されるようになりました。
int a = 0;
a ++;
int b = 0;
b = a;
cssファイル等のアップロード用にGitHub.ioの登録
私は普段仕事でも個人でもGitHubを使用して コードの 管理をしているのですが、実はこのGitHub、GitHub.ioというページがあって、 簡単にウェブページやブログ的なことができる機能が あり、なにやらウェブページを簡単に実装できるとのことでした。なので今回はこちらを登録し、 各種cssファイル（google-code-prettifyや自作css等）をアップして使うことにしました。
試しに登録してみたところ、簡単に、かつ無料でアップローダー的な 使い方ができるリポジトリの作成ができたため、是非使ってみてください。実はこの 記事に貼ってある画像やcssも、登録したGitHub.ioから引っ張ってきています。
結論
色々と書きましたが、今回課題となっていたソースコードを見やすく表示したいという課題ですが、私はgoogle-code-prettifyと、GitHub.ioを使うことによって解消できました。
なので実はhtmlで記事を書く必要はなく、マークダウンでも行けたのでは？という状態になっています…。今からブログを書こうと思っている方は、マークダウンにするかhtmlをゴリゴリ書いていくか、自分に必要な機能とそれぞれの手法でできることをしっかりと調べて、選ぶことをおすすめします。
（私はせっかくなのでhtml、cssの勉強もかねてこのまま頑張って書いていこうと思います…。）
0 件のコメント:
コメントを投稿