1. Introduction
  2. Guidance
  3. 1. Get started
  4. 2. Bundles
    1. 2.1. All-in-One Library for Browsers
    2. 2.2. All-in-One Library for Node.js
  5. 3. Compilers
    1. 3.1. (Pre-)Compiler in CLI
    2. 3.2. Compiler in Rust
    3. 3.3. Compiler in Node.js
    4. 3.4. Compiler in Wasm (Web)
  6. 4. Renderers
    1. 4.1. Renderer in Rust
    2. 4.2. Renderer in Node.js
    3. 4.3. Renderer in Wasm (Web)
    4. 4.4. Renderer in React
    5. 4.5. Renderer in Solid
    6. 4.6. Renderer in Angular
    7. 4.7. Renderer in Vue3
    8. 4.8. Hexo Plugin
  7. 5. Samples
    1. 5.1. Static, Responsive rendering
    2. 5.2. Streaming, Incremental rendering
    3. 5.3. Serverless rendering
  8. 6. Trouble Shooting
  9. Project samples
  10. 8. shiroa
  11. 9. typst-preview
  12. 10. hexo-renderer-typst
  13. References
  14. 13. Routing to Renferences

reflexo-typst Documentation

#

Hexo Library

#

Installation

Install Hexo dependencies:

Note: please align the version of the dependencies to same vesrion, otherwise you may get runtime rendering error.


        
// ensure dependencies is installed

        
npm install @myriaddreamin/typst.ts @myriaddreamin/typst-ts-renderer @myriaddreamin/typst-ts-node-compiler

        
// ensure plugin is installed

        
npm install hexo-renderer-typst

        
// ensure dependencies is installed

        
npm install @myriaddreamin/typst.ts @myriaddreamin/typst-ts-renderer @myriaddreamin/typst-ts-node-compiler

        
// ensure plugin is installed

        
npm install hexo-renderer-typst

#

Usage

Add your main files to source/_posts directory. And run:


        
# serve files

        
hexo serve

        
# generate files

        
hexo generate

        
# serve files

        
hexo serve

        
# generate files

        
hexo generate

Currently, it could only render typst documents inside of source/_posts (Hexo Posts) and fix typst workspace (root directory) to the root of your blog project.

#

Font assets

Currently it is not configurable. Please put your font assets in one of following directory.

  • fonts
  • assets/fonts
  • asset/fonts

#

Target-aware compilation

The plugin will set the sys.inputs.x-target to web. You can configure your template with the variable:


        
/// The default target is _pdf_.

        
/// The compiler will set it to _web_ when rendering a dynamic layout.

        
///

        
/// Example:

        
/// ```typc

        
/// #let is-web-target() = target.starts-with("web")

        
/// #let is-pdf-target() = target.starts-with("pdf")

        
/// ```

        
#let target = sys.inputs.at("x-target", default: "pdf")

        


        


        
#show: it => {

        
  if target.starts-with("web") {

        
    // configure stuff for web

        
  } else {

        
    // configure stuff for pdf

        
  }

        
  

        
  it

        
}

        
/// The default target is _pdf_.

        
/// The compiler will set it to _web_ when rendering a dynamic layout.

        
///

        
/// Example:

        
/// ```typc

        
/// #let is-web-target() = target.starts-with("web")

        
/// #let is-pdf-target() = target.starts-with("pdf")

        
/// ```

        
#let target = sys.inputs.at("x-target", default: "pdf")

        


        


        
#show: it => {

        
  if target.starts-with("web") {

        
    // configure stuff for web

        
  } else {

        
    // configure stuff for pdf

        
  }

        
  

        
  it

        
}