Depuis la version 0.13, Typst supporte l'export en HTML (encore expérimental pour le moment). Et comme je suis une grosse fangirl et que j'ai la chance d'utiliser un générateur de site super modulaire (Soupault), j'ai configuré mon blog pour pouvoir écrire en Typst en plusse de Markdown.
Ça tiens en deux lignes de configuration : la première c'est de dire que les fichiers .typ sont des pages.
1
[settings]
2
3
page_file_extensions = [
4
"html",
5
"md",
6
"typ", # On ajoute cette ligne
7
]
1
[settings]
2
3
page_file_extensions = [
4
"html",
5
"md",
6
"typ", # On ajoute cette ligne
7
]
La deuxième c'est d'indiquer à Soupault qu'il faut passer ces fichiers à la moulinette et pas juste les copier bêtement :
1
[preprocessors]
2
typ = "bash -c 'typst c --features html --format html $1 -' --"
1
[preprocessors]
2
typ = "bash -c 'typst c --features html --format html $1 -' --"
La commande est un peu bizarre, pourquoi passer par bash au lieu de juste appeler typst directement ? La réponse c'est que Soupault ajoute le nom du fichier d'entrée comme dernier argument, mais Typst a besoin du fichier d'entrée puis du fichier de sortie (ici - pour la sortie standard, que Soupault lit). Donc on a besoin d'une petite astuce pour inverser l'ordre des arguments.
Le CSS n'est pas du tout géré par Typst (en tout cas pas pour le moment, peut-être que ça sera le cas quand ça sera une option), j'ai une feuille de style écrite à la main, que j'insère automatiquement dans le document HTML aussi avec Soupault :
1
[widgets.page-style]
2
widget = "insert_html"
3
html = '<link rel="stylesheet" href="unique.css">'
4
selector = "head"
5
after = ["base-style"]
1
[widgets.page-style]
2
widget = "insert_html"
3
html = '<link rel="stylesheet" href="unique.css">'
4
selector = "head"
5
after = ["base-style"]
1
#import "@preview/zebraw:0.4.6": zebraw-html
2
3
#show heading.where(level: 1): it => html.elem("h1", it.body)
4
#show raw.where(block: true): zebraw-html.with(lang: true)
5
6
#let note = body => html.elem("div", attrs: (class: "note"))[
7
== Info
8
9
#body
10
]
11
12
#let details = (summary, body) => html.elem("details")[
13
#html.elem("summary", summary)
14
#body
15
]
16
17
= Bloguer avec Typst
18
19
Depuis la version 0.13, #link("https://typst.app")[Typst] supporte
20
l'export en HTML (encore expérimental pour le moment). Et comme je
21
suis une grosse fangirl et que j'ai la chance d'utiliser un
22
#link("/web")[générateur de site] super modulaire
23
(#link("https://soupault.app/")[Soupault]),
24
j'ai configuré mon blog pour pouvoir écrire en Typst en plusse de Markdown.
25
26
Ça tiens en deux lignes de configuration : la première c'est de
27
dire que les fichiers `.typ` sont des pages.
28
29
```toml
30
[settings]
31
32
page_file_extensions = [
33
"html",
34
"md",
35
"typ", # On ajoute cette ligne
36
]
37
```
38
39
La deuxième c'est d'indiquer à Soupault qu'il faut passer ces fichiers
40
à la moulinette et pas juste les copier bêtement :
41
42
```toml
43
[preprocessors]
44
typ = "bash -c 'typst c --features html --format html $1 -' --"
45
```
46
47
La commande est un peu bizarre, pourquoi passer par `bash` au lieu de juste
48
appeler `typst` directement ? La réponse c'est que Soupault ajoute le nom du
49
fichier d'entrée comme dernier argument, mais Typst a besoin du fichier d'entrée
50
_puis_ du fichier de sortie (ici `-` pour la sortie standard, que Soupault lit).
51
Donc on a besoin d'une petite astuce pour inverser l'ordre des arguments.
52
53
#note[
54
Le CSS n'est pas du tout géré par Typst (en tout cas pas pour le moment,
55
peut-être que ça sera le cas quand ça sera une option), j'ai une feuille
56
de style écrite à la main, que j'insère automatiquement dans le document
57
HTML aussi avec Soupault :
58
59
```toml
60
[widgets.page-style]
61
widget = "insert_html"
62
html = '<link rel="stylesheet" href="unique.css">'
63
selector = "head"
64
after = ["base-style"]
65
```
66
]
67
68
#details[Preuve que ça marche : le code source de cette page][
69
#raw(block: true, lang: "typst", read("typst-blog.typ"))
70
]
71
72
#details[Du coup j'ai envie de faire des bêtises][
73
#show math.equation: html.frame
74
75
Regardez je peux écrire des maths :
76
77
$
78
sum_(k=1)^n k = (n(n+1)) / 2
79
$
80
]
1
#import "@preview/zebraw:0.4.6": zebraw-html
2
3
#show heading.where(level: 1): it => html.elem("h1", it.body)
4
#show raw.where(block: true): zebraw-html.with(lang: true)
5
6
#let note = body => html.elem("div", attrs: (class: "note"))[
7
== Info
8
9
#body
10
]
11
12
#let details = (summary, body) => html.elem("details")[
13
#html.elem("summary", summary)
14
#body
15
]
16
17
= Bloguer avec Typst
18
19
Depuis la version 0.13, #link("https://typst.app")[Typst] supporte
20
l'export en HTML (encore expérimental pour le moment). Et comme je
21
suis une grosse fangirl et que j'ai la chance d'utiliser un
22
#link("/web")[générateur de site] super modulaire
23
(#link("https://soupault.app/")[Soupault]),
24
j'ai configuré mon blog pour pouvoir écrire en Typst en plusse de Markdown.
25
26
Ça tiens en deux lignes de configuration : la première c'est de
27
dire que les fichiers `.typ` sont des pages.
28
29
```toml
30
[settings]
31
32
page_file_extensions = [
33
"html",
34
"md",
35
"typ", # On ajoute cette ligne
36
]
37
```
38
39
La deuxième c'est d'indiquer à Soupault qu'il faut passer ces fichiers
40
à la moulinette et pas juste les copier bêtement :
41
42
```toml
43
[preprocessors]
44
typ = "bash -c 'typst c --features html --format html $1 -' --"
45
```
46
47
La commande est un peu bizarre, pourquoi passer par `bash` au lieu de juste
48
appeler `typst` directement ? La réponse c'est que Soupault ajoute le nom du
49
fichier d'entrée comme dernier argument, mais Typst a besoin du fichier d'entrée
50
_puis_ du fichier de sortie (ici `-` pour la sortie standard, que Soupault lit).
51
Donc on a besoin d'une petite astuce pour inverser l'ordre des arguments.
52
53
#note[
54
Le CSS n'est pas du tout géré par Typst (en tout cas pas pour le moment,
55
peut-être que ça sera le cas quand ça sera une option), j'ai une feuille
56
de style écrite à la main, que j'insère automatiquement dans le document
57
HTML aussi avec Soupault :
58
59
```toml
60
[widgets.page-style]
61
widget = "insert_html"
62
html = '<link rel="stylesheet" href="unique.css">'
63
selector = "head"
64
after = ["base-style"]
65
```
66
]
67
68
#details[Preuve que ça marche : le code source de cette page][
69
#raw(block: true, lang: "typst", read("typst-blog.typ"))
70
]
71
72
#details[Du coup j'ai envie de faire des bêtises][
73
#show math.equation: html.frame
74
75
Regardez je peux écrire des maths :
76
77
$
78
sum_(k=1)^n k = (n(n+1)) / 2
79
$
80
]
Regardez je peux écrire des maths :