grr

ATOMとMarkdownで簡単HTML作成

ATOMとMarkdownで簡単HTML作成

ATOMエディタとMarkdown記述方式を利用することで、
ウェブサイトに使えるHTMLデータを簡単に作ることができます。
このページの文書はHTML書き出しを利用して作られています。

ATOMエディタ とは

ATOMはGitHubにより開発されている高機能なテキストエディタです。

ATOMエディタでは、MarkdownファイルをリアルタイムでHTML描画しながら編集できます。
プレビュー画面は、マークダウン(.md)ファイル編集中に　Packages > Markdown Preview > Toggle Preview　 もしくは、Ctrl + Shift + M キーで表示することができます。
プレビュー画面を保存するか、プレビュー画面右クリックにある[ Copy As HTML ]でHTMLデータを作成できます。

Markdown記法 とは

Markdown(マークダウン)は、プレーンテキストに見出しや引用等の装飾できる軽量マークアップ言語です。
HTMLより簡単に、文書の文字サイズや形式、表示をかえることができ、 多くのBlogやCMSで使われています。 ファイル拡張子は .md です。 https://daringfireball.net/projects/markdown/

Markdownの基本の書き方

プレーンテキスト中に記号やスペースを入れることで、文書を整形します。

見出し

シャープ(#)の後に空白、その後に文字を書くことで、見出し(HTMLにおけるh1タグ)

  # 見出し(h1)
  ## 見出し(h2)
  ### 見出し(h3)

# 見出し(h1) ## 見出し(h2) ### 見出し(h3)

改行

行の最後にスペース２つを入れることで改行

文書１  (最後にスペース２つ)  
文書２

文書１
文書２

段落

行間に空白の行を入れることで段落

段落１ 段落１
            (空白の行)    
段落２ 段落２

段落１ 段落１

段落２ 段落２

リスト

アスタリスク( * )の後に空白、その後に文字を書くことでリスト
アスタリスクのかわりにハイフン( - )、プラス( + )も使用できます。
スペースかタブでインデント(字下げ)することで、階層化できます。

* くだもの
  * りんご
  * みかん
* やさい
+ おかし
  + ポテトチップス
  + 飴だま
  • くだもの
    • りんご
    • みかん
  • やさい
  • おかし
    • ポテトチップス
    • 飴だま

リスト記号のかわりに数字とピリオドで表記。記述数字の順番は無視される。

1. りんご
3. みかん
2. スイカ
  1. りんご
  2. みかん
  3. スイカ

斜体,強調

斜体

アスタリスク( * )で文字を挟むことで斜体
言語 *English*

言語 English

強調

アスタリスク( ** )２つもしくはアンダーコア( __ )２つで文字を挟むことで強調
文章中で**単語**を__強調__できます。

文章中で単語を強調できます。

斜体と強調

アスタリスク( *** )３つもしくはアンダーコア( ___ )３つで
文字を挟むことで斜体と強調両方
***斜体と強調***
斜体と強調

打ち消し線

ハイフン( - )３つで文字を挟むことで打ち消し線
~~打ち消し線~~
打ち消し線

引用

行の先頭に > で引用

吾輩は猫である

>連続で多重引用

引用

多重引用

コード

グレイヴ・アクセント３つ( ``` )もしくはダッシュ(\~\~\~)で文字を挟むことでコード
(Markdownを適用しない文書を表示する)
グレイヴ・アクセント( ` )で文字を挟むことでインラインコード
(文書中の一部をコード表示にする)

~~~

コード

~~~

コード

罫線

アスタリスク３つ以上( *** )、アンダーコア３つ以上( ___ )もしくはハイフン３つ以上( --- )と改行で罫線
HTMLでの<HR> (Horizontal Rule)にあたる

***
___
---

リンク

URLを<>で挟むことでリンク

<https://google.com/>

https://google.com/

鍵括弧[]に名称、括弧()にURLで文字にリンク

[Google](https://google.com/)

Google

外部参照

URLを別の場所に記述して利用

 検索サイト[Google][1]は巨大な[データベース][2]です。
 [1]:https://google.com/ "TEST"  
 [2]:https://kotobank.jp/word/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9-6197

検索サイトGoogleは巨大なデータベースです。

画像

![alt](URL)で画像を貼り付け
alt情報は画像の代替用のテキスト情報

![alt情報](URL)

alt情報

pre 整形済みテキスト

半角スペース４つもしくはタブで、コードをpre表示

(スペース) # 見出し(h1)
(スペース) ## 見出し(h2)
(スペース) ### 見出し(h3)
# 見出し(h1)
## 見出し(h2)
### 見出し(h3)

table

| Header One     | Header Two     |
| :------------- | :------------- |
| Item One       | Item Two       |
Header One Header Two
Item One Item Two

Checkbox

- [ ] Todo list
    - [x] ATOMインストール
    - [ ] bot制作
    - [ ] trading研究
  • [ ] Todo list
    • [x] ATOMインストール
    • [ ] bot制作
    • [ ] trading研究

エスケープ

\を記号の前に置くことで、文字として表示

\*\*\*

***

その他

aaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaa

| 目次 | |:-----------|

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned