AtomにMarkDownでhtmlを書こう

まずは以下のようなテキストを書きます。

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)の記法で、リンクがかけます。
[こんな感じ](http://www.miyasaka.info/)みたいな感じです。

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

以下、リストのテスト

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

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

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

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


atomとchromeでもLiveStyle

livestyle-atomのインストール

apmが動くなら、
apm install livestyle-atom

串設定ができていない場合などは
AtomメニューからPreference, Installをクリック
Search Packagesで
Livestyle-atom
を検索、Install
Atomを再起動

ChromeにLiveStyleをインストール

ChromeウェブストアでEmmet LiveStyleをインストール
Chromeを再起動

設定する

Chromeに追加されたLiveStyleボタンをクリックして、右上のOFFをONにする
スクリーンショット 2016-06-09 19.35.03
今回はstyle.cssというcssを変更する場合。

いじる

ChromeのDeveloper toolsでstyleを変更すると、atomで開いているエディタ内のcssが自動で変更された。
スクリーンショット 2016-06-09 19.36.21
スクリーンショット 2016-06-09 19.36.42
▲変更前
スクリーンショット 2016-06-09 19.37.00
スクリーンショット 2016-06-09 19.37.08
▲変更後

反対に、atomでstyleを変更すると、chromeの画面がリアルに書き換わります。


SSL証明書の期限切れgithub serverにSourceTreeから無理やりプッシュする

github/ github enterpriseのSSL証明書の期限が切れてしまうと、「fatal: unable to access ‘: SSL certificate problem: Invalid certificate chain」のようなエラーが出て、プッシュできなくなる。
スクリーンショット 2016-01-08 12.07.24

無理やりプッシュするには、SourceTreeの環境設定ーGitで、「SSL証明書の検証をしない」にチェックを入れるといい。
スクリーンショット 2016-01-08 12.04.27

まあ、根本的な解決方法ではないけれど。


二段階認証のgithubアカウントでpushできない場合


二段階認証のgithubアカウントでpushすると
remote: Invalid username or password.
のエラーが出た。

このような場合、httpsではなくsshでpushする必要があるらしい。

確認
>$ git remote -v
origin https://github.com/***/***.git (fetch)
origin https://github.com/***/***.git (push)

変更
>$ git remote set-url origin git@github.com:***/***.git

再度確認
>$ git remote -v
origin git@github.com:***/***.git (fetch)
origin git@github.com:***/***.git (push)

pushしてみる
>git push -u origin master
Counting objects: 974, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (961/961), done.
Writing objects: 100% (973/973), 29.11 MiB | 470.00 KiB/s, done.
Total 973 (delta 55), reused 0 (delta 0)
To git@github.com:***/***.git
master -> master
Branch master set up to track remote branch master from origin.

正常にpushできた。