Typst blog template Sample Page

執筆環境

1. TypstのHTMLエクスポート機能のテスト

これはただの文章です。日本語、English、12345、記号 & < > " ' が混ざっても本文として読めるかを確認します。

2. 基本機能

2.1. インライン装飾

太字強調

斜体強調

生文字列

https://example.co.jp

表示テキスト付きリンク

‘シングルクオート’

“ダブルクオート”

2.2. コード

#include <stdio.h>

int main(void) {
  printf("hello\n");
  return 0;
}

#let greet(name) = [Hello, #name!]
#greet("Typst")

コード 1 は raw figure のキャプション表示を確認します。

2.3. リストと用語

• hoge

• fuga

  • nested hoge
  • nested fuga

1. piyo
2. moge

用語

説明内容

HTML export

Typstの文書をHTMLとして出力する機能

2.4. 引用

… ἔοικα γοῦν τούτου γε σμικρῷ τινι αὐτῷ τούτῳ σοφώτερος εἶναι, ὅτι ἃ μὴ οἶδα οὐδὲ οἴομαι εἰδέναι.

— Plato

… I seem, then, in just this little thing to be wiser than this man at any rate, that what I do not know I do not think I know either.

— from the Henry Cary literal translation of 1897

2.5. 数式

インライン数式: $\left(𝑣\cdot \nabla \right)𝑣<\text{nya}$

ブロック数式:

3. 参照、図、表

3.1. 見出し参照

節 3.1 は見出しへの参照です。

引用は [1] だよ。複数引用は [1] と [2] です。

図 1 は画像がテスト用であることを示しています。

表 1 は表のキャプション位置と参照表示を確認します。

4. カスタム

4.1. アラート

4.2. footnote

TypstのカスタムHTMLエクスポートでは、本文中に脚注への参照リンクを置き、脚注本文を記事末尾の脚注セクションへ出力します。PCでは参照リンクにカーソルを合わせると脚注をすぐに確認でき、押すとPC・スマートフォンともに参考文献と同じプレビューパネルで内容を確認できます。

これがノートを付けられる対象1^※1

これがノートを付けられる対象2^※2

節 4.2 はfootnoteの説明セクションを参照しています。

4.3. サイトの埋め込み

#raw_html(`<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ぽんこつフリーナ様<a href="https://x.com/hashtag/Furina?src=hash&amp;ref_src=twsrc%5Etfw">#Furina</a> <a href="https://x.com/hashtag/GenshinImpact?src=hash&amp;ref_src=twsrc%5Etfw">#GenshinImpact</a> <a href="https://t.co/1gGJqkbBNw">pic.twitter.com/1gGJqkbBNw</a></p>&mdash; くるん:C108(土)東ア23b (@kurun_p) <a href="https://x.com/kurun_p/status/1699020600084513137?ref_src=twsrc%5Etfw">September 5, 2023</a></blockquote> <script async src="https://platform.x.com/widgets.js" charset="utf-8"></script>`)

#youtube("https://www.youtube.com/watch?v=eWw8HoNkVkU")

#youtube("https://www.youtube.com/watch?v=K7RPkBgZRSU", start: 10)