MathlogにおけるMarkdown記法に関するメモ (2020年12月時点)

この記事は、2020/12/9 時点(Ver 1.4)での情報です。

2023年12月時点では公式で Markdown 記法に関するページが作成されています。最新の情報は以下の公式のページを参照してください。

https://mathlog.notion.site/d42d852f90884f0397b52952dbaea71e

Markdown関連

見出し

      # 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
    

a

見出し5(#####)まで対応しています。見出し1が<h2>, 見出し2が<h3>,...という対応です。Mathlogでは1つずれています。

タイトル（下の画像）が<h1>なので、見出しは<h2>から始まります。
a

引用

      > 引用  
> 引用
>> 多重引用
    

↓

引用
引用

多重引用

HTMLでは<blockquote> 引用 </blockquote>で書けます。

コード

      ```
hoge
fuga
```
    

↓

      hoge
fuga
    

インデントを使って書くこともできます。

          hoge
    fuga
    

↓

      hoge
fuga
    

HTMLでは<pre><code>hoge</pre></code>で書けます。

一部の言語でシンタックスハイライトに対応しています。

      ```python
def hello():
    print("Hello world!")
```
    

↓

      def hello():
    print("Hello world!")
    

インラインコード

hoge

hoge

HTMLでは<code>hoge</code>で書けます。

水平線

      ---
    

HTMLでは<hr>で書けます。

箇条書き

番号なし(ul)

      - リスト1
    - リスト1_1
        - リスト1_1_1
        - リスト1_1_2
    - リスト1_2
- リスト2
- リスト3
    

• リスト1
  • リスト1_1
    • リスト1_1_1
    • リスト1_1_2
  • リスト1_2
• リスト2
• リスト3

-の代わりに+や*でも代用可能です。

番号あり(ol)

      1. 番号付きリスト1
    1. 番号付きリスト1-1
    1. 番号付きリスト1-2
1. 番号付きリスト2
1. 番号付きリスト3
    

1. 番号付きリスト1
   1. 番号付きリスト1-1
   2. 番号付きリスト1-2
2. 番号付きリスト2
3. 番号付きリスト3

強調

      これは*イタリック*です
これは_イタリック_です
    

これはイタリックです
これは_イタリック_です

      これは**ボールド**です
これは__ボールド__です
    

これはボールド です
これは__ボールド__です

      これは***イタリック＆ボールド***です
これは___イタリック＆ボールド___です
    

これは イタリック＆ボールド です
これは イタリック＆ボールド です

      $x^2=1$の解は**$x=\pm 1$**です。
    

$x^2=1$の解は$x=\pm 1$です。
(数式にも使えます。太字にはならないけど色がつきます。)

取り消し

      ~~取り消し線~~
    

取り消し線

      ~~$x^2=1$の解は**$x=0$**です。~~
    

$x^2=1$の解は$x=0$です。

（数式は取り消せません。）

$\require{enclose}$
~~$\enclose{horizontalstrike}{x^2=1}$の解は**$\enclose{horizontalstrike}{x=0}$**です。~~

リンク

      [Mathlog](https://mathlog.info/)
    

Mathlog

      [タイトル付きリンク](https://mathlog.info/ "タイトル")
    

タイトル付きリンク

画像

      ![photo](https://cdn.pixabay.com/photo/2020/09/20/07/24/iceland-5586225_1280.jpg)
    

photo

=100などでサイズ指定ができます(おそらくMathlogの独自記法)

      ![photo](https://cdn.pixabay.com/photo/2020/09/20/07/24/iceland-5586225_1280.jpg =100)
![photo](https://cdn.pixabay.com/photo/2020/09/20/07/24/iceland-5586225_1280.jpg =200)
    

photo
photo

テーブル

普通

      | $x$ | $x^2$ |
|---|---|
| 1 | 1 |
| 2 | 4 |
| 3 | 9 |
    

2行目の-の数は1個以上なら何個でも大丈夫です。

右揃え

      | $x$ | $x^2$ |
|---:|---:|
| 1 | 1 |
| 2 | 4 |
| 3 | 9 |
    

左揃え

      | $x$ | $x^2$ |
|:---|:---|
| 1 | 1 |
| 2 | 4 |
| 3 | 9 |
    

中央揃え

      | $x$ | $x^2$ |
|:---:|:---:|
| 1 | 1 |
| 2 | 4 |
| 3 | 9 |
    

数式関連

Mathlogで使える数式コマンド一覧

Supported TeX/LaTeX commands — MathJax 3.1 documentation にある表の2列目（パッケージ)が空白、base、amsであるコマンドは使用できます（他にも利用できるのはあります）。
Mathlogではphysicsパッケージに対応していないので、2列目がphysicsである\sechなどのコマンドはMathlogでは対応していません。

対応しているパッケージリスト

• ams: そこそこ一般的なもの。\binom{n}{k}$(\genfrac{}{}{0ex}{}{n}{k})$とか\varGamma$\Gamma$とか
• amscd: 可換図式とかが書けるみたい
• bbox: 数式に背景色とか境界線とかがつけられる。\bbox[red]{x+y}: $x+y$
• boldsymbol: イタリック太字が使える。\boldsymbol{x}$\mathit{x}$
• cancel: 数式に取り消し線がつけられる: \cancel{1=2}$\cancel{1=2}$, \xcancel{1=2}$\xcancel{1=2}$
• color: 数式に色がつけられる。{\color{red} x} + {\color{blue} y}$x+y$
• html: 数式にハイパーリンクがつけられるなど。\href{http://mathlog.info}{\log} x$\log x$
• newcommand: \newcommandとかが使える。
• require: ロードされていないパッケージをロードする？\require{enclose} \enclose{circle}{x}$\overline{)x}$ (encloseはデフォルトでは使えない)
  • \require{physics} \sech x も試してみたけどこれはうまく行かなかった。
• unicode: \unicode{65}$\text{A}$, \unicode[.55,0.05]{x22D6}: $\text{⋖}$
• verb: 入力通り出力する。\verb|\sqrt{x}|: $\mathtt{\text{sqrt{x}}}$

対応していないパッケージリスト

• physics
• braket
• mhchem
• enclose
• extpfeil
• action
• bussproofs

追記(2020/12/9)

Mathlogで使っているMathJaxのバージョンは3.1ではなく、2.7みたいです。
なので、コマンド一覧のページとしては、上で提示した Supported TeX/LaTeX commands — MathJax 3.1 documentation よりも MathJax TeX and LaTeX Support — MathJax 2.7 documentation を見たほうが安全そうです。

参考: Mathlog公式Twitterのツイート

上記の「対応していないパッケージリスト」のうち

• mhchem
• enclose
• extpfeil
• action

については\require{mhchem}のように\requireを使えば使えます。
しかし、

• physics
• bracket
• bussproofs

についてはMathJax2.7にはないパッケージなので、\requireを使っても使えません。

インライン数式とディスプレイ数式

ドルマーク1つで囲う数式をインライン数式、ドルマーク2つで囲う数式をディスプレイ数式と言います。

      <!--訳合ってドルマークを全角で書いてますが、半角にする必要があります。-->
方程式＄x^2=1＄の解は＄x=\pm 1＄です。

方程式＄＄x^2=1＄＄の解は＄＄x=\pm 1＄＄です
    

方程式$x^2=1$の解は$x=\pm 1$です。

方程式$$x^2=1$$の解は$$x=\pm 1$$です

Mathlogにおけるディスプレイ数式の扱い

Mathlogで方程式＄＄x^2=1＄＄の解はと書くと、

      方程式
＄\displaystyle{
x^2=1
}＄
の解は
    

と翻訳されます。Mathlogでは、ドルマーク2つで囲う数式はドルマーク１つで囲む数式＋displaystyle+改行で作られています（ディスプレイ数式なのに中央によらないのはそういう理由があるみたいです。）

ちなみにMathlogのエディタで、ドルマークを半角にして
a

と入力すると、

      <!--半角で書くとこうなります。-->
方程式$x^2=1$の解は$x=\pm 1$です。

方程式$$x^2=1$$の解は$$x=\pm 1$$です
    

と表示されます。このことから方程式＄＄x^2=1＄＄の解はが

      方程式
＄\displaystyle{
x^2=1
}＄
の解は
    

と翻訳されていることがわかります。

コードブロックとインラインコードの中で半角ドルマークを2つの囲いを書く方法

このように入力すると
a
このように表示されます。
a
```で作るコードブロック以外であればうまくいきます。

数式番号

\tag{1}のように書くと数式番号が出てきます。\labelと\refも使えます。

      方程式＄＄x^2=1\tag{1}＄＄の解は＄＄x=\pm 1\tag{2}\label{hoge}＄＄です。式(\ref{hoge})から...
    

方程式$$\begin{array}{}\text{(1)}& x^2=1\end{array}$$の解は$$\begin{array}{}\text{(2)}& x=\pm 1\end{array}$$です。式($\text{2}$)から...

\bm

\bm{x}は対応していないですが、\boldsymbol{x}と書くと$\mathit{x}$と表示されます。

\DeclareMathOperator

マクロの登録画面では\DeclareMathOperatorに対応していないので

      \DeclareMathOperator{\sinc}{sinc}
    

と書く代わりに

      \newcommand{\sinc}{\operatorname{sinc}}
    

と書く必要があります。

begin/endの環境

こう書くと
a
こうなります。

      \begin{align}
x+y&=3\\
z&= 2
\end{align}
    

つまり、ドルマークで囲わなくても直接\begin, \endが書けます（ドルマークを自動で補完してくれるので）。

$$\begin{array}{rl}x+y& =3\\ z& =2\end{array}$$

XY-pic

可換図式とかが書けるらしいです。詳しくは mathlog公式Twitterのツイート を参照。

$$Uy⟨x,y⟩xX{\times }_{Z}YqpXfYgZ$$
この図のコードは XyJax - = Xy-pic extension for MathJax より。

HTML関連

コメントアウト

<!--と--&gtで囲むとコメントアウトができます。MarkdownもHTMLもコメントアウトできます。

      <!--
## コメントアウトされたコンテンツ
コメントアウトされています。
-->
    

MathlogでHTMLを書くときの注意

MathlogでHTMLを書くとき、改行をすると<br>が挿入されるので注意です。HTMLを1行で書くようにすると<br>が挿入されないです。

例えば、改行して

      <div class="border">
    <ul>
        <li>リスト1</li>
        <li>リスト2</li>
    </ul>
</div>
    

と書くと、

とだだっ広く表示されてしまいます。次のように改行をせずに1行で

      <div class="border"><ul><li>リスト1</li><li>リスト2</li></ul></div>
    

と書けば、

と想定通りに表示されます。

折りたたみ

markdownには折りたたみの機能はないですが、HTMLのdetailsタグを使うと折りたたみができます。

      <details><summary>折りたたみ</summary><p>中身
**x**
$x^2$
hoge
fuga
piyo</p></details>
    

pタグが無いと折りたたみの外と中で行間などが違ってきてしまいます(この記事の公開時はpタグなしで書いてました。2020/12/29に気づいて追記しました。)

      <details><summary>折りたたみ(pタグなし)</summary>中身
**x**
$x^2$
hoge
fuga
piyo</details>
    

上記の場合は大丈夫でしたが、detailsの中だとあんまりMarkdownが使えないので注意です。例えば箇条書きが使えないです。

      <details><summary>detailsの中では例えば箇条書きが使えないです。</summary>
- リスト1
- リスト2
    - リスト2-1
</details>
    

仕方ないので代わりにHTMLを使います。

      <details><summary>HTMLを使った</summary><ul><li>リスト1</li><li>リスト2</li></ul></details>
    

Qiitaでは、折りたたんだ部分にMarkdownを使いたい場合、Markdownを<div>で囲むと使えるらしいですが、Mathlogではできないです。(参考: Markdown記法 チートシート - Qiita )

HTMLタグの中で使用可能なMarkdown文法と使用不可能なMarkdown文法

使用可能なMarkdown文法の例

      <div class="border">
$x^2$
**強調**
[Mathlog](https://mathlog.info/)
![photo](https://cdn.pixabay.com/photo/2020/09/20/07/24/iceland-5586225_1280.jpg =100)
</div>
    

$x^2$
強調
Mathlog
photo

使用不可能なMarkdown文法の例

      <div class="border">
- リスト1
- リスト2
    - リスト2-1

> 引用

| $ x $ | $ x^2 $ |
|---|---|
| 1 | 1 |
| 2 | 4 |
| 3 | 9 |
</div>
    

インライン要素に翻訳されるMarkdown文法はHTMLタグの中で使えて、ブロック要素に翻訳されるMarkdown文法はHTMLタグの中では使えないという感じでしょうか？

Mathlog特有

囲み枠

      &&&
hoge
&&&
    

わけあってHTMLで書かないといけない場合は、

      <div class="box normal"><p>hoge</p></div>
    

で書けます(F12を押せばHTMLのコードが調べられます。)

形式

Mathlogのエディタの形式を押せばいろんな囲みのコードが生成できます。
a

以下、形式の中から定理を選択したときのもの。

      &&&thm 定理名（任意）
定理内容
&&&
    

囲み枠と折りたたみの組み合わせ

      <details><summary>折りたたみ</summary><div>&&&
$x^2=1$の解は$x=\pm 1$
&&&
</details>
    

これだとうまく行かないです（&&&の前後に空行を挟んでもうまく行かないです）。囲み枠の部分をHTMLにして

      <details><summary>折りたたみ</summary><div class="box normal"><p>$x^2=1$の解は$x=\pm 1$</p></div></details>
    

と書くとうまくいきます。

形式の中の形式

例えば、「証明」形式の中に「囲み枠」形式を入れたい場合、次のように書いてもうまくいきません。

      &&&prf 証明手法（任意）
ほげ
&&& 
内容
&&&
&&&
    

一般に形式の中に形式は書けないです。内側の形式をHTMLで書く必要があります。

      &&&prf 証明手法（任意）
ほげ
<div class="box normal"><p>内容</p></div>
&&&
    

目次の自動生成

何もしなくても目次は自動で追加されるらしいです。(画像は、記事の新規作成時のプレビュー側に表示されるもの)

とは言っても、目次が生成されていない記事もあるので、目次が生成される条件がありそうです。見出しの#(h2)があることが条件でしょうか。#(h2)の見出しを使わずに##(h3)の見出しから始める場合だと目次は生成されないみたいです。
また、プレビューの時点では目次は生成されず、投稿したあとの実際の記事でないと目次は生成されません。
（目次が自動で生成されるのを知らず、どうすれば目次が生成されるのかでめちゃくちゃ悩んでハマってしまいました。）

参考

• Markdown記法 チートシート
• 機能紹介 - HackMD

更新履歴

• 2020/12/9
  • Mathjaxのバージョンについて(数式関連/Mathlogで使える数式コマンド一覧)
• 2020/12/29
  • 数式の取消方法の追加(Markdown関連/取り消し)
  • 「【余談】HackMDでの画像のサイズ指定」の追記(Markdown関連/画像)
  • detailsタグ内でpタグを使用(HTML関連/折りたたみ)
  • 「Mathlog特有/形式の中の形式」を追加