カテゴリー: git/github

AtomにMarkDownでhtmlを書こう

### MarkDownとは
書いたテキストに簡単なマークアップをするだけで、HTMLを書き出すことができる、便利な方法です。
BlogやWeb記事を大量に書く人にとっては非常に便利なので、覚えておいて損はありません。

### AtomでMarkDown
今回は、Atomで書いたテキストを、htmlにする方法を書いていきます。

#### Atomをダウンロードする
まずは[Atomのサイト](https://atom.io/)から、Atomをダウンロード、インストールしましょう。

#### テキストを書く
htmlにしたい文章を、プレーンにどんどん書いていきましょう。

#### MarkDownプレビュー表示
Macなら shift + ctrl + M
Windowsなら Alt + P
で、プレビューウインドウが表示されます。

僕の環境ではなぜかshift + ctrl + Mが反応しないので、AtomのPackagesメニューからMarkdown Preview、Toggle Previewを選んでいます。

#### 見出しをマークアップする
見出しのテキストの前に「# 」を入れると、h1になります。
「## 」と2個ならh2。h4は、もちろん「#### 」です。
スペースを一つ入れるのをお忘れなく。

#### リンクをマークアップする
\[リンクのテキスト]（URL)の記法で、リンクがかけます。
[こんな感じ](https://www.miyasaka.info/)みたいな感じです。

#### ulやol
テキストの冒頭に「* 」または「- 」でul、「1. 」のように数字だとolのリストになります。
htmlで直接<ul><li>なんとか</li>を打つのは面倒ですからね。
これは便利。

以下、リストのテスト

##### 似ているけど違いがわからない動物
* トド
* セイウチ
* アザラシ
* オットセイ
* アシカ

##### ポケモンGoでたくさん出てるけど、もういらないとおもうポケモンベスト3
1. ポッポ
2. コラッタ
3. ズバット

#### マークアップできたら
右側のプレビューウィンドウで右クリック、「Copy As HTML」。
Blogやエディタにペースとすれば、HTMLが貼り付けられると思います。

ここで説明した、「#」「リンク」「*」を覚えるだけで、かなり便利にテキストをhtmlにできると思います。

MarkDownとは

書いたテキストに簡単なマークアップをするだけで、HTMLを書き出すことができる、便利な方法です。
BlogやWeb記事を大量に書く人にとっては非常に便利なので、覚えておいて損はありません。

AtomでMarkDown

今回は、Atomで書いたテキストを、htmlにする方法を書いていきます。

Atomをダウンロードする

まずはAtomのサイトから、Atomをダウンロード、インストールしましょう。

テキストを書く

htmlにしたい文章を、プレーンにどんどん書いていきましょう。

MarkDownプレビュー表示

Macなら shift + ctrl + M
Windowsなら Alt + P
で、プレビューウインドウが表示されます。

僕の環境ではなぜかshift + ctrl + Mが反応しないので、AtomのPackagesメニューからMarkdown Preview、Toggle Previewを選んでいます。

見出しをマークアップする

見出しのテキストの前に「# 」を入れると、h1になります。
「## 」と2個ならh2。h4は、もちろん「#### 」です。
スペースを一つ入れるのをお忘れなく。

リンクをマークアップする

[リンクのテキスト]（URL)の記法で、リンクがかけます。
こんな感じみたいな感じです。

ulやol

テキストの冒頭に「* 」または「- 」でul、「1. 」のように数字だとolのリストになります。
htmlで直接<ul><li>なんとか</li>を打つのは面倒ですからね。
これは便利。

以下、リストのテスト

似ているけど違いがわからない動物

• トド
• セイウチ
• アザラシ
• オットセイ
• アシカ

ポケモンGoでたくさん出てるけど、もういらないとおもうポケモンベスト3

1. ポッポ
2. コラッタ
3. ズバット

マークアップできたら

右側のプレビューウィンドウで右クリック、「Copy As HTML」。
Blogやエディタにペースとすれば、HTMLが貼り付けられると思います。

ここで説明した、「#」「リンク」「*」を覚えるだけで、かなり便利にテキストをhtmlにできると思います。