このblogをStackEditを使って投稿する

Markdownにあこがれて

世の中ではMarkdown記法を使って、ちょっと格好良くテキストを仕上げていたりする人々がいる。Markdown憧れる。かつては議事録とかメモ帳で書いて記号を使って見やすくしたりとか工夫をしていたが、文字の大きさは変更できないし強調したりということが単なるテキストファイルでは無理仕様に近い。

Markdownを使いたい

いかんせん無職なので議事録を家で書くことはない。絶対ない。でも書きたい思いがぐぁんぐぁん来て、じゃあこのblogを書いてみるのがいいんじゃないという安直な考えで早速StackEditorを見つけて使ってみると。

StackEditor すばらしい

使ってみると以外と簡単。Markdown記法のルールもたくさんある訳ではないので、まぁそれもいい。詳しい利用方法とかは検索すればたくさん出てくるので触れないが、一点いや二点気になることがある。

StackEditorのプレビューみたいな

そう単純に文章を書いて投稿したところで、右にでるプレビューみたいには表示されないのである。

enter image description here

これも検索するとStackEditorで使用されているCSSをbloggerに持って行くには的な記事が見つかると思う。それに従っただけで少なくともblockquote は見栄えが揃ったのでこれで満足。

iconテキスト使いたいな

もともとこのblogでは外部wegフォントなicon表示を実装済みなのでStackEditorの方をFont Awesomeに対応させれば満足行くかなと。
検索するとPlease add Font Awesome Support #529という記事がヒットする。ここに書かれているように

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

をどこかで読み込ませればよいようだ。同じページに

Please use custom extension (see #137).

とあるので、そちらを見るとcustom extensionとして設定すればOKなようだ。早速Settings > Extensions > UserCustom extension に前述したCSSのlinkを読み込ませるスクリプトを書く。

userCustom.onReady = function() {
$('head').append('<linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">');
};

Settings > Extensions

UserCustom extension

icon使いたい放題

ほれ
ほら
ほほう
という感じになる。

ポイント

  • webフォントなiconの使い方
  • cssの適用

0 件のコメント:

コメントを投稿