Org-modeでhugoの記事を書く
目次
はじめに
hugoの記事はmarkdown形式で書くのが一般的ですが、org-modeにも対応しています。org-modeで書いたときにどのように表示されるか、HTMLにはどう出力されるかをまとめてみました。
org-modeをhugoでHTMLにする
見出し
| org | htmlタグ |
|---|---|
| * 見出し1 | <h2>見出し1</h2> |
| ** 見出し2 | <h3>見出し2</h3> |
| *** 見出し3 | <h4>見出し3</h4> |
数字がひとつ減る。タイトルが<h1>タグ。
文字装飾
| org | 表示 | HTMLタグ |
|---|---|---|
| *太字* | 太字 | <strong>太字</strong> |
| /Italic/ | Italic | <em>Italic</em> |
| +取り消し+ | <del>取り消し</del> | |
| _下線_ | 下線 | <span style="text-decoration: underline;">下線</span> |
| 上付き^{abc} | 上付きabc | 上付き<sup>abc</sup> |
| 下付き_{abc} | 下付きabc | 下付き<sub>abc</sub> |
- 太字は<b>タグではなく<strong>タグです。
- Italicは「斜体」です。漢字フォントがうまく斜めにならなかったので…
リスト
ハイフンでリスト。
- ハイフンの後には半角スペースが必要。
- インデントをつけると階層になる。
- List 1 - List 2 - List 2-1 - List 2-2 -List 3
- List 1
-
List 2
- List 2-1
- List 2-2
- List 3
<ul>
<li>List 1</li>
<li>
<p>List 2</p>
<ul>
<li>List 2-1</li>
<li>List 2-2</li>
</ul>
</li>
<li>List 3</li>
</ul>説明付きリスト
- タイトル1 :: タイトル1の説明 - タイトル2 :: タイトル2の説明
- タイトル1
- タイトル1の説明
- タイトル2
- タイトル2の説明
<dl>
<dt>
タイトル1
</dt>
<dd>タイトル1の説明</dd>
<dt>
タイトル2
</dt>
<dd>タイトル2の説明</dd>
</dl>チェックリスト(非対応)
残念ながら非対応。普通のリストになる。
- [ ] チェックリスト - [x] チェック済みリスト
- チェックリスト
- [x] チェック済みリスト
<ul>
<li class="unchecked">チェックリスト</li>
<li>[x] チェック済みリスト</li>
</ul>markdownのチェックリストは以下のように展開される
- チェックリスト
- チェック済みリスト
<ul>
<li><input disabled="" type="checkbox">チェックリスト</li>
<li><input checked="" disabled="" type="checkbox">チェック済みリスト</li>
</ul>
引用
#+begin_quote ～ #+end_quote ブロックで囲う
#+begin_quote ここは引用です。 - 引用ブロック内ではリストも使えます。 - *文字修飾* も可能。 #+end_quote
ここは引用です。
- 引用ブロック内ではリストも使えます。
- 文字修飾 も可能 。
<blockquote>
<p>ここは引用です。</p>
<ul>
<li>引用ブロック内ではリストも使えます。</li>
<li><strong>文字修飾</strong> も可能。</li>
</ul>
</blockquote>コメントアウト
- 行頭に＃(シャープ)を入れるとコメントアウトされる。htmlに出力されない。
#+begin_comment 〜 #+end_commentブロックはコメントアウトできない。- html内にコメントを残したい場合、
#+begin_export html ～#+end_exportを使用して<!-- -->でコメントアウトする。
# コメント(シャープ) #+begin_comment コメントブロック #+end_comment #+begin_export html <!-- htmlコメント --> #+end_export
<div class="comment-block">
<p>コメントブロック</p>
</div>
<!-- htmlコメント -->表(テーブル)
| a | b | c | |-----+-----+-----| | <l> | <c> | <r> | | 1 | 2 | 3 |
| a | b | c |
|---|---|---|
| 1 | 2 | 3 |
- セパレータが入っていると、見出しになる。
- 左寄せや中央寄せのパラメータは反応しない(画面表示もされない)。
コードブロック
#+begin_src emacs-lisp (message "codeblock test") #+end_src
(message "codeblock test") <div class="src src-emacs-lisp">
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-emacs-lisp" data-lang="emacs-lisp"><span style="display:flex;"><span> (<span style="color:#a6e22e">message</span> <span style="color:#e6db74">"codeblock test"</span>)</span></span></code></pre></div>＃+begin_sec (言語名) : 言語名に対応したハイライトが適用される。
リンク
[[https://google.ne.jp][Google]]
<p><a href="https://google.ne.jp">Google</a></p>
org形式のリンク記法 [[URL][表示文字列]] が使える。新規ウインドウではなく同一ウインドウで開かれる。
内部リンク
[[{{< ref "/policy.md" >}}][プライバシーポリシー]]
<a href="https://taka2site.com/policy/">プライバシーポリシー</a></p>hugoのショートコード{{< ref "ファイル名" >}}を使う。ローカル環境でのパスをサーバーに移動したときのURLに変換してくれる。
終わりに
以上、いろいろ試してみた結果でした。
hugoでサイト制作している少数派、さらにorg-modeを使用している人が一体何人いるのかわかりませんが(笑)。すこしずつ更新していこうと思います。
コメントブロック