Yew: Integrating `highlight.js` with CRM eaxmple

[shivshankardayal]

Question

How can I integrate with highlight.js for syntax highlighting with pulldown_cmark in CRM example?

[jstarry]

Hey @shivshankardayal, good question!

If you're using stdweb, JS interop works with the js! macro. If you're using web-sys, you will want to use wasm-bindgen. Please let me know which one :)

Since Yew is similar to React, you can see how highlight.js works with React. See this example: https://github.com/bvaughn/react-highlight.js/blob/master/src/Highlight.js#L20

You will want to call highlightBlock for your code.

I would really like if you added highlight.js to the CRM example so that others can learn too, thank you!

[shivshankardayal]

I am still a noob but I will try to do that.

[shivshankardayal]

@jstarry How to build yew as cargo gives a compile time error 'Yew requires selecting either theweb_sysorstd_webcargo feature', build.rs:9:9. How do I select one of these? Documentation is lacking on it.

[jstarry]

@shivshankardayal check out how to use features here: https://doc.rust-lang.org/cargo/reference/features.html

There are instructions in the examples/README.md here: https://github.com/yewstack/yew/blob/8edf136da6ba1955c847c5860ec55623a27c08e9/examples/README.md#running-the-examples

Here's how you specify in Cargo.toml: https://github.com/yewstack/yew/blob/8edf136da6ba1955c847c5860ec55623a27c08e9/examples/web_sys/counter/Cargo.toml#L9

[shivshankardayal]

@jstarry Thanks a lot. I went through highlight.js a bit. First I will integrate it with CRM library then I would try to convert highlight.js to a rust library which can be used with something like pulldown-cmark.

[jstarry]

Nice! So you want to add syntax highlighting to static html instead of apply it dynamically in the browser?

[shivshankardayal]

No I want a Webassembly library of highlight.js which can do it in browser.

[jstarry]

I see, why do you want to rewrite highlight.js in Rust? Performance?

[shivshankardayal]

It is just a purist approach. Also, it will help gain momentum for webassembly.

[jstarry]

Excellent, looking forward to it 👍

[GalAster]

Hi, @shivshankardayal, I also need a static highlight.

How about syntect, it can be used as following:

use syntect::parsing::SyntaxSet;
use syntect::highlighting::ThemeSet;
use syntect::html::highlighted_html_for_string;
use yew::Html;

fn highlight_html(s: &str) -> String {
    let ss = SyntaxSet::load_defaults_newlines();
    let ts = ThemeSet::load_defaults();
    let syntax = ss.find_syntax_by_token("rs").unwrap_or_else(|| ss.find_syntax_plain_text());
    highlighted_html_for_string(&s, &ss, syntax, &ts.themes["base16-ocean.dark"])
}

pub fn highlight_vdom(s: &str) -> Html {
    let div = yew::utils::document().create_element("div").unwrap();
    div.set_inner_html(highlight_html(s));
    Html::VRef(div.into())
}

A better way is to re-implement the ast transformation, which can bring greater flexibility

[hamza1311]

@GalAster, using syntect in this current form on WASM is not a good idea.

   let ss = SyntaxSet::load_defaults_newlines();
   let ts = ThemeSet::load_defaults();

This will increase your WASM binary size by around 2MBs for no good reason (loading unused syntaxes and themes). You should be only loading what you need (see: https://github.com/trishume/syntect/issues/135#issuecomment-700306068)

Also, syntect can use either rust-onig or fancy-regex.
If you use the default regex-onig feature, rust-onig will not compile on WASM target. See https://github.com/rust-onig/rust-onig/issues/153.
Using fancy-regex is slow and from my experience, slow enough to noticeably block the main thread so it needs to be called from a web worker which (until https://github.com/thedodd/trunk/issues/46 is fixed) is a hassle at best.
There's also no way of knowing if using regex-onig feature would fix the performance issue.