2015/02/03 17:29:16

Chrome拡張機能「LiveMd」でお手軽MarkDown生活


Warning: Attempt to read property "post_excerpt" on null in /home/kpkyvkzp/public_html/unskilled.site/wp-content/themes/unskilled2/content-header-eyecatch.php on line 5
目次(クリックするとジャンプします)
  • 1:MarkDownでメモを取りたいの
  • 1.1:とっても便利なMarkDown
  • 1.2:windows用のMarkdownエディタって…
  • 2:Chrome拡張機能「LiveMd」
  • 2.1:ブラウザだからこその便利さ
  • 2.2:「LiveMd」の機能
  • 2.3:Markdown記法について
  • 2.4:「LiveMd」でMarkdown記法
  • 3:まとめ

MarkDownでメモを取りたいの

とっても便利なMarkDown

MarkDownとは定められた記法で書くとそれに対応したHTMLに変換してくれる言語の事です。Markdownのようなものは軽量マークアップ言語などと言われるそうです。

記事を書くのにwordpressでWP-Markdownプラグインを使い始めるようになって、Markdown記法がとても便利だということがわかってきました。

そんなわけで記事以外にも、日常でのメモやアイデアプロットなどもMarkdownで取りたくなってきた。

windows用のMarkdownエディタって…

しかしなぜか、Markdownエディタで有名なMouなどはMac専用だったりします。

windows用でもMarkdownエディタはいくつかありますが、決定版的なものは定まっていない様子。

Chrome拡張機能「LiveMd」

ブラウザだからこその便利さ

そこでいろいろエディタを探していたら、Chrome拡張機能でMarkdownできるエディタ「LiveMd」を見つけるに至りました。

この「LiveMd」はかなりシンプルだがブラウザ上でMarkdown出来るのはなんとも素晴らしいです。メモを取るのに煩わしいことは何もないです。

実のところライトな利用なら、すっとメモを取れる方が機能豊富より重要だったりします。 その点、いつも開いているchromeでMarkdown出来るのは便利以外の何物でもないです。

実際使ってみるとシンプルですが、もうこれなしではメモが取れないくらい便利です。

「LiveMd」の機能

「LiveMd」の拡張機能アイコンをクリックするとエディタがタブとして開かれるが、画面はすこぶるシンプル。

livemd

左側がMarkdown記法で記述するスペースで、右側が記述したものがHTMLになって表示されるスペースです。

メモはいくつも増やすことができ、プラスボタンを押せば新規メモが作られます。

書き溜めたメモは書類マークタブからリスト形式で閲覧することができます。

livemd

メモの削除ははさみマークタブから各メモの右にあるゴミ箱ボタンを押すだけです。

livemd

目のマークボタンはHTMLになって表示されるスペースだけを表示するモードへの切り替えです。

livemd

基本的に取ったメモはタブを消しても、Chromeを落としても、消えることはないです。

ただメモを他に持っていきたい場合もあると思うので、そんなときは、Markdown記法で記述するスペースの右上にあるダウンロードマークをクリックすると、メモをmd形式ファイルでダウンロードができます。

書いた文字数も表示されるのがちょっとうれしいです。

livemd

livemd

このファイルは何のことはないテキストファイルなので、windowsのメモ帳でも開くことができます。

livemd

livemd

Markdown記法について

Markdown記法には方言があるようで、@MINOが正しい記法になっているかはわからないですが、記法自体それほど多くの種類は無く、通常のメモなら今回紹介するくらいの記法を覚えておけばいいのではないかと思います。

もし記法に関してちゃんと知りたい人は以下のサイトで確認するといいと思います。

「LiveMd」でMarkdown記法

代表的な記法の紹介ともに「LiveMd」の感じを紹介してみたいです。

livemd

見出しは#(シャープ)を使う。#一個はh1に相当します。 #を増やしていけばh2,h3…と対応してくれます。 #の後ろには半角スペースが必要なので注意。

段落は基本的に空行で判断されます。

太文字は**(アスタリスク)で囲みます。半角スペースはいらないです。

イタリック文字(斜体)は*で囲みます。これも半角スペースはいらないです。

打消しは~~で囲みます。同じく半角スペースはいらないです。

liリスト形式はリストとなる部分の上下に空白行が必要になるので、改行する必要があります。 *を付けるとリストになります。*の後ろには半角スペースが必要。(*の代わりに-や+でもliリストが作れる)

olリストは数字と.(ドット)を使う。これもストとなる部分の上下に空白行が必要。 1.のように記述しますが、.の後には半角スペースが必要です。

***のようにすると水平線が引ける

リンクは[アンカーテキスト](URL)で記述することができます。

livemd

便利なのが、表(テーブル)です。|をつかって本当の表のよう記述していく。 項目となる行の次の行(2行目)に:-(コロンとマイナス)を入れる必要があります。:-は体裁を整える為に:——-のように書いてもOKです。 :-が左寄せ、-:が右寄せ、:-:が中央寄せになります。

livemd

\(バックスラッシュ)でMarkdownをエスケープできます。

引用は>の後ろに半角スペース。

紹介したMarkdown記法を表にしてまとめてみましました。

種類 対応するタグ 記法
見出し h1~h6 #と半角スペース、#の数で見出しレベルが決まる
太文字 b **で囲む
斜体 em *で囲む
打消し s ~~で囲む
リスト ul リストとなる部分の上下に空行、*と半角スペース
リスト ol リストとなる部分の上下に空行、数字と.と半角スペース
水平線 hr ***
リンク a [アンカーテキスト](URL)
表(テーブル) table |と:-の組み合わせ
エスケープ \
引用 q >

まとめ

@MINOなんかでも一日のうちに何度となくメモを取ます。 主にはプログラミングアイデアだったり、仕事の内容だったりですが、以前の自分のメモは単に箇条書きで後から見ると見づらかったです。

生産性向上とか胡散臭いことを言うつもりはないですが、メモやアイデアプロットが綺麗に残せると、のちのちの自分を楽させてあげられるのは間違いないです。