【記事作成効率化】「Markdown」+「VSCode」で記事を効率的に生産しよう

プログラミング環境
スポンサーリンク

みなさんこんにちは.お久しぶりです.
ブログカフェChromaの色です!

最近どうも忙しさにかまけて記事の更新をサボってしまっています…

そんなこんなで,何が原因で記事を書いていないのかを考えていたのです.

原因として思いついたのが,記事投稿までにやることが多くてめんどくさいということ.

パーマリンクの設定,アイキャッチ画像の作成など,いざ記事を書こうと思ってもそれ以外の作業がいやで二の足を踏んでしまうんです…(面倒くさがり)

そんなときに,文章だけに集中して記述できるMarkdownと呼ばれる記法とそのエディタを発見したので皆さんに共有しようと思います!

もっときれいな文書を書きたい方におすすめのTeXとの連携はこちらの記事をどうぞ!

Markdown記法とは?

Markdownについて説明した記事は調べるとたくさん出てくるので,ざっくりとイメージを掴んでもらえるような紹介をしたいと思います!

Markdown記法は,簡単に言うとプログラミングや難しい設定無しで大まかなブログレイアウトを作成可能な記法です.

webページを記述する記法といえば,有名どころではHTMLを思い浮かべる人が多いのではないでしょうか.

HTMLを使ってある程度装飾のあるページを作成するには,かなり多くのタグや要素の知識(いわゆるプログラミングみたいなものです)を要求されます.

しかしMarkdown記法ならばそのような知識はほぼ不要でブログを書くことができちゃうんです!!

Markdownなら文書作成が爆速!?

Markdownのメリット3つ

さっきの章でも簡単に触れましたが,Markdownの魅力はたくさんあります!

私が思う魅力を簡単にまとめてみました!

  1. 難しい知識不要で,文章を書くことに集中できる
  2. オフライン環境で編集可能で,思いついたときにメモ感覚で記事作成できる
  3. VSCodeと組み合わせて快適に記事を書ける

1つ目の魅力「難しい知識不要で,文章を書くことに集中できる」については,先程説明したHTMLとの比較がわかりやすいかと.

試しに,同じページを出力するためのコードをMarkdownとHTMLで比較してみましょう.

Markdown vs. HTML

前提として,タイトルと大きな見出しが一つ,太字と斜体の文章があるようなページを作成するとしましょう.

HTMLで書くとこんな感じ

<h1>記事タイトル</h1>
<h2>大きな見出し</h2>
ここに大まかな記事の内容

<strong>太字</strong>はこんな感じで<em>斜体(強調)</em>はこう表示されます.

色

うーん,タグの内容を覚えていればいいけど,毎回書くのは面倒かも

そして,出来上がったページがこちら.

最初に設定した条件はクリアできていますし,まあいいんじゃないでしょうか(適当).

でも,いちいちタグとかの使い方覚えたり書いたりするのめんどくさいな〜

もし書いてる途中にアイデアが浮かんでも,タグを打っているうちに忘れてしまいそうです…

Markdownで書くとこんな感じ

# 記事タイトル

## 大きな見出し

個々に大まかな記事の内容

**太字**はこんな感じで *斜体(強調)* はこう表示されます.

そして,出来上がったのがこちら.

どうでしょう?見た目もほぼ先ほどと変わりありませんね.

色

体裁もほとんど変わらないし,ソースコードが簡潔で分かりやすい!

それなのに,ソースコードがとても短いし,内容以外に余計な文字が少ないじゃないですか!

私自身,久しぶりにHTMLのコードを書いたので,Markdownに比べて2倍くらいの時間がかかりました(笑)

こんな感じで,簡単にページを作成可能なことを感じていただけたでしょうか?

「Markdown」+「VSCode」でさくっと記事作成!

ここまでは,Markdownの便利さについて紹介しました.

ポイントとしては,

手間をかけずにある程度体裁の整った記事が書ける

ことを覚えてもらえば大丈夫です!

ここで,さらなる手間省略の方法を紹介します.

それは,Markdownのエディターとして「VSCode」を採用することです.

VSCodeは,Microsoftがリリースしている無料のコードエディタです.

VSCodeのメリット3つ

  1. 起動が早い
  2. デフォルトでMarkdownに対応している(面倒な設定不要)
  3. Markdownで書いた結果をリアルタイムでプレビューできる

起動が早いことで,Markdownの手軽さと合わせて更に手軽に記事が作成できるようになります!

せっかくMarkdownでさっくりメモでもしようと思ったのに,エディターの起動が遅くてはストレスが溜まってしまいます よ!!

また,VSCodeは,デフォルトでMarkdownの記述にも対応 しています.

面倒な設定作業が不要で,乗り換えもらくらくです.素晴らしいですね.

上記と関連して,VSCodeはリアルタイムプレビュー にも対応しています.

編集画面にて,crtl+kを押した後,vを押すことでプレビューウィンドウを表示することができます.

プレビューウィンドウでは,コードを書いた瞬間にプレビューに反映させるリアルタイムプレビュー が利用でき,仕上がりを常に確認しながら編集できます!

ダウンロードはこちらから!

MarkdownとVSCodeが連携出来たら,次は是非TeXなどの組版システムを利用してみてください!

全体のまとめ

今回は,メモ感覚で体裁の整った記事を作成可能なMarkdown という言語と,それを最大限に活かせるVSCodeというエディタを紹介しました.

Markdown記法に対応したブログサイトもあるようですし,VSCodeではMaekdownからWordPressに記事を投稿可能なプラグインも存在するようですので,詳しいことが分かれば紹介します!

それでは,今回はこのへんで!

コメント

タイトルとURLをコピーしました