From ad064b263f85a9c0e8fa487fad8f4faa99dd566e Mon Sep 17 00:00:00 2001 From: 0xpapercut <0xpapercut@gmail.com> Date: Fri, 3 May 2024 22:46:45 +0200 Subject: [PATCH] Update README.md --- README.md | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 7371a38..24494ea 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,36 @@ # wypst Typst math typesetting for the web. -## Getting started -### Installation -Install wypst with npm: +## Usage +You can load this library either by using a script tag (preferred), or installing it with npm (for advanced usage). + +### Option 1: Script tag +This is simplest way to load, and looks very similar to how you go about it with KaTeX. This is the preferred and simplest method. + +```html + + +``` + +Keep in mind that the javascript file is 17M, so if your internet is slow it might take some seconds to load. + +### Option 2: npm package +Sometimes having the wasm inlined in the script file is incovenient. When this is the case, you will have to install the package with npm. + ```bash npm install wypst ``` -### Importing -You can import wypst as an ECMAScript module: -```javascript + +You may then load the wasm binary + +``` import wypst from 'wypst'; +import wasm from 'wypst/dist/wypst.wasm'; + +wypst.initialize(wasm); +wypst.renderToString("x + y") // Test it out! ``` + ### Rendering Typst Math To render a Typst math expression, you can use either `render` or `renderToString`, as the example below shows: ```javascript @@ -21,6 +40,3 @@ wypst.renderToString('sum_(n >= 1) 1/n^2 = pi^2/6'); // Renders into an HTML str ## Contributing All help is welcome. Please see [CONTRIBUTING](CONTRIBUTING.md). - -## Disclaimer -As of now wypst is very experimental, so you may encounter lots of bugs. I expect to have most fixed by mid March.