Tinymist v0.13.0: HTML Extension

[Myriad-Dreamin]

I released tinymist v0.13.0 just now. At the same time, I published the myriad-dreamin.tinymist-vscode-html extension, which extends HTML language support to typst, helping me doing web development powered by typst.

• completes CSS class in string if the key is class or "class".
• completes in HTML and CSS raw block.

The attached video exhibits code completing css classes and html tags in typst file.

This extension is also the my first try to make a “tinymist plugin”. html (extension) is not a builtin feature, i.e. not a feature needed by every typst guys, so I split it to a separate extension.

How HTML extension works

The new extension bundles a CSS parser and a HTML language server. It runs the parser and the server over your typst workspaces.

When the editor requests a code completion on typst source file. It invokes the tinymist.interactCodeContext to get typst semantics on the current cursor by tinymist. Then, it either runs the css completion or the html completion respecting typst semantics. The code completion function looks like:

const [{mode}] = vscode.executeLspCommand("tinymist.interactCodeContext", {
  query: [{ kind: "modeAt", position }]
});

if (mode === "string" && isClassAttribute()) {
  return mayCompleteClass();
} else if (mode === "raw" && isRawBlock(["html", "css"])) {
  return completeEmbeddedLanguage(langId);
}

The tinymist.interactCodeContext is also a valid command in other editors such as neovim.

We can also make more helpful pluggable extensions to integrate various web frameworks into typst, like tailwind css. @overflowcat

Marketplace page of the HTML extension: Tinymist Typst HTML - Visual Studio Marketplace
Repository: tinymist/contrib/html/editors/vscode at e9eb6e6c95aeda8154b9a503b9821c7a7b8724ea · Myriad-Dreamin/tinymist · GitHub

[KS84]

This looks great! Thank you for this.

Any plans on integrating the HTML plugin into neovim?

[flirora]

Sorry, but I can’t view the video on Firefox.

[Myriad-Dreamin]

I’m not using neovim so I don’t pay for neovim, but I believe community could help us make it, because most efforts are in the language server and accessible by neovim. Some tinymist contributors are using neovim btw.

[Myriad-Dreamin]

I converted the video to a gif and uploaded it to forum.