コンテンツにスキップ

数式とコード

ドル記号で囲んだ数式は組版され、フェンスで囲んだコードはハイライトされます。HTML ページ、画像、PDF のいずれでも同様です。

数式とコードは v0.2.0 で追加されました。

数式

$…$ はインライン数式、$$…$$ はディスプレイ数式です。

The famous one is $E=mc^2$, and this is a display formula:

$$
\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
$$
  • 区切り文字のルールは、marp-core 4.4.0 から読み取った Marp Core のものです。空白が続く $ は数式を開始せず、数字が続くものは数式を閉じません。そのため、$5 and $10 のような価格表記は テキストのまま残ります。
  • go-tex/math は各数式を、em 単位でサイズ指定された インライン SVG に組版します。そのため、数式はテキストのサイズに追従し、テキストのベースラインに揃います。 HTML ページ、画像、PDF のいずれでも同じ SVG が使われます。
  • 解析できない数式は書いたとおりに表示され、エラーはその title に保持されます。

コード

フェンスで囲んだコードブロックは go-rouge で色付けされます。 go-rouge は、Marp のテーマがスタイルを定義している highlight.js のクラス名を出力します。

```go
fmt.Println("hello")
```

go-rouge が知らない言語は、Marp Core と同じくプレーンテキストとして出力されます。

行番号

v0.8.0 では、コードブロックに行番号を付けられます。Marp Core には行番号の機能がなく、 フェンスの言語名の後ろに続く部分を無視します。そのため、オプションはそこに波かっこで書きます。 オプションを使ったスライドデッキも、Marp ではオプションがない場合と同じようにレンダリングされます。

```go {lineNumbers}
func main() {
	fmt.Println("hello")
}
```

```go {lineNumbers=10}
// starts at 10
```
書き方意味
{lineNumbers}1 から番号を付けます(Slidev の {lines:true} と Pandoc の {.numberLines} も解釈されます)
{lineNumbers=10}10 から番号を付けます(startLine=10、Pandoc の startFrom="10" も可)
{lineNumbers=false}スライドの設定にかかわらず、番号を付けません

あるスライドとそれ以降のスライドのすべてのコードブロックに番号を付けるには、ディレクティブ <!-- lineNumbers: true --> を設定します(1 枚のスライドだけなら _lineNumbers)。kind(スライドの種類)を使えば、 同じ系統のスライドにまとめて一度で設定できます。

kinds:
  listing: {lineNumbers: true}

各番号は、テーマのコードボックス内で行の先頭に置かれ、罫線で区切られます。 吹き出しや絵文字などで行の高さが増えても、番号はその行のベースラインに揃ったままです。番号は、 コードの文字色と背景色を混ぜた控えめな色で表示され、default・ gaia・uncover の各テーマのライトとダークのいずれでも、コントラスト比は 4.5:1 以上です。ページ上では番号は 選択できず、 スクリーンリーダーにも読み上げられません。PDF では描画されますがテキストからは除外されるため、 テキスト抽出ツールはコードだけを読み取ります。PowerPoint や OpenDocument のファイルでは、各行の先頭にある編集可能なテキストになります。このオプションを使わない スライドデッキは、以前とバイト単位で同じ出力になります。指定した行のハイライトにはまだ対応していません。

コードの吹き出し

v0.8.0 では、コードの行末に、ブロックの下にある注釈を参照する番号付きの丸印を付けられます。構文は Quarto のもの で、 Asciidoctor のコメント形式でもあります。マーカーはそのコード自体の言語のコメントなので、 コードは有効なままです。注釈は、ブロックの直後にある番号付きリストです。

```go
func main() { // <1>
	x := load() // <2>
	fmt.Println(x)
}
```

1. The entry point.
2. Reads the input.
書き方意味
// <1>、# <1>、-- <1>、; <1>、% <1>、' <1>マーカーだけを含む行コメント。コメントとマーカーの両方が丸印に置き換えられます
<!-- <1> -->、/* <1> */同上。囲み型のコメントを使う言語向けです
// <1> <2>1 行に 2 つの丸印
x = 1 # count <1>コメントのテキストは残り、その後ろに丸印が付きます

マーカーが丸印になるのは、ブロックの直後のリストが 1 から始まり、 すべての番号に対応する項目がある場合だけです。そうでない場合、ブロックは書いたとおりに残ります。 丸印は、default・gaia・uncover の各テーマのライトとダークのいずれでも、コードの文字色のリングで描画されます。 リストの項目にも同じ丸印で番号が付きます。

丸印は 選択できません。ページからコードをコピーすると、マーカーを除いたコードが得られます。 PDF ではテキストから除外されたベクターとして描画され、 PowerPoint や OpenDocument のファイルでは編集可能な図形になります。吹き出しは 行番号と組み合わせられます。Marp Core には吹き出しの機能がないため(marp-core 4.4.0)、Marp では コメントと番号付きリストが書いたとおりに表示されます。吹き出しを使わないスライドデッキは、 以前とバイト単位で同じ出力になります。

v0.9.0 では、HTML ページ上で丸印と注釈が互いに連動します。丸印にマウスを重ねるか、 Tab キーでフォーカスすると対応する注釈が色付けされ、注釈の側でも同様に対応する丸印が色付けされます。 これは Quarto の code-annotations: hover と同じ動作ですが、ここではスクリプトを使わず、 スタイルシートだけで実現しています。そのため、どちらもスクリプトを制限している Playground のサンドボックス化された プレビューでも、VS Code のプレビューでも同じように動作します。各丸印には注釈が説明として関連付けられているので、 スクリーンリーダーは丸印に到達すると注釈を読み上げます。色付けのフェードインは、閲覧者が 視差効果を減らす設定(reduced motion)を求めていない場合にだけ行われます。画像、PDF、PowerPoint、OpenDocument の ファイルは、バイト単位で変わりません。

フォント

Lato の Regular、Bold、Black と各イタリック、Roboto Mono の Regular、Bold と 各イタリックが埋め込まれています。そのため、gaia の見出しは本来の太さで表示され、イタリックのテキストも イタリックで描画されます。

Created on by tannevaled

Modified on by tannevaled