markdownの始め方

calendar 2025-02-21 · 4 分で読了 · markdown

もともとはプレーンテキストをhtmlに変換(Export/convert)するための書き方

いろいろな変換ソフトが乱立したために、markupの記述方法(mark)が乱立して いる。 最小限共通と思えるmarkは以下に紹介!?

かんたんな文法

0. セクションヘッド

#(井桁,number)を用います。#の数でレベルを指定します。

1. テキストフォーマット(文字装飾)

  • *アスタリスク* or _アンダーバー_ 1つで囲むと斜体

    アスタリスク or アンダーバー 1つで囲むと斜体

  • **アスタリスク** or __アンダーバー__ 2つで囲むと太字(強調)

    アスタリスク or アンダーバー 2つで囲むと太字(強調)

  •  ~~チルダ2つで囲めば打ち消し~~

    チルダ2つで囲めば打ち消し

  •  <u>uタグで囲めば下線</u>

    uタグで囲めば下線

  • <mark>markタグで囲めばハイライト</mark>

    markタグで囲めばハイライト

  • 色指定したいときは、htmlタグ

1      <font color='red'>赤</font>
2      <span style="color:blue">青</span>
3	  <span style="background-color:blue"> 
4	  <font color="white">バックラウンド青,白抜き文字</font></span>

赤 青

バックラウンド青,白抜き文字

spanはインライン要素としてグループ化できるタグ

背景色はstyle タグ

  • 引用はできないのが標準??

    不等号+半角スペース,"などいろいろ試したけど効かん!???

1>>> ddd
2>>> dddd
3>>>> jhjh
4" llll
5" llll
6" fff

2. リスト形式

2.1 番号なしリスト

アスタリスクorハイフンorプラス1つ+半角スペース

  • 1
  • 2
  • 3
  • ああすと
    • ee
  • dなん
  • リスト1
    • リスト2
      • リスト3

TABで階層つける。

2.2 番号ありリスト

数字orアルファベット+ドット+半角スペース

  1. hoge
  2. guga
    1. hh
    2. kaj

a. abv a. ffg

i. iii i. greece

  1. list 2. lii
    3. ll

ギリシャ数字はHTMLタグを書くしかないのかな?

  1. hoge
  2. guga
  1. hoge
  2. guga

カッコ付きなどは、cssで頑張りましょう。

3. ブロック環境

3.1 そのまま出力,preタグ

  • バッククォート3つでそのまま。
1# 1
2# 2

  • 半角スペース4つでもpre

      hoge
  kkkk
  eeee

  • TAB1つでもpre

      * kkk
  	* llll
  		* jkjk

ソースファイルもかける

``` ruby:d.rb
ddd
```

バッククォートで文字列を挟んでもpre

アンダーバーjeee.hoge_hh

バッククォートで囲まない場合、アンダーバーが少し乱れるようです。

hoge_hh

3.2 数式

hugoでkatexやmathjaxを使うには、 clarityの場合は、 config.tomlやmath.htmlの設定が必要です。

使用しているthemeで設定方法が異なるかもしれません。

$で囲めばインライン(設定必要)、 $$で囲めば1行数式

T_e=\int_0^\infty$は $T_e=\int_0^\infty$

または

$$T_e=\int_0^\infty$$

となります。

3.3 折りたたみ

1<details>
2<summary>タイトル</summary>
3
4おりたためる
5本文は1行空行して、2行目から記述
6矢印クリックして折りたたみのトリガー
7</details>

右矢印をクリックすると折りたたまれた部分が表示されます。

タイトル

おりたためる 本文は1行空行して、2行目から記述 矢印クリックして折りたたみのトリガー

3.4 変換出力しない(コメント)

HTMLのタグ

1<!--
2ここは出力されない 
3改行記号がなくとも
4大丈夫??
5-->

4. 画像やファイル挿入、リンク

4.1 図を挿入

1![タイトル](ファイル場所)
2![step response](post/hoge/fuga.png)
3ファイル場所は相対パスでは表示されない場合があるので注意

step応答

大きさ指定はhtmlタグ

1<img src="./fig_op_6.png" width="240">
2こちらは相対パスでもokの場合があるようです

1[yahooへリンク](https://yahoo.co.jp)

yahooへリンク

5. 表

  • 縦棒で区切る
  • :で揃え位置指定できる
  • 2行目にハイフン指定必要
  • ハイフンの数は1つ以上。数で幅を制御できない?
  • 罫線(枠線)表示はない。
  • 1行目が自動で太字になる
1|:---|:---:|---:|
トロマグロハマチ
鶏豚牛
abc
---------

行揃えがない場合

トロマグロハマチ
鶏豚牛
abc

6. 罫線

3つ以上のハイフン、アンダーバー、アスタリスクで罫線

7. ヘッダ部

書いても変換されない。

CSSやmarpなどいろいろな設定ができる。

8. Export

  • htmlに出力するだけでもpandoc必要(Emacs)
  • pdfに出力する: pandoc/lualatexを使う方法
1pandoc markdown.md -o markdown.pdf -V documentclass=ltjarticle --pdf-engine=lualatex
2pandoc markdown.md -o markdown.pdf -V documentclass=jlreq --pdf-engine=lualatex

ただしヘッダ指定したほうが、紙幅などきれいかも(紙幅せまめ)

  • slideにする
1pandoc hoge.md -f markdown -t beamer -o hogeP.pdf  --pdf-engine=lualatex -V documentclass=jlreq
2pandoc markdown.md -f markdown -t beamer -o markdown.tex
3pandoc markdown.md -f markdown -t beamer -o markdown.tex --latex-engine=lualatex

1番目はうまくいかず(Undefined control sequence. \setbeamertemplate

2,3番目。latex-engine指定の効果は未検証