dancespiele / yew_prism

highlighter code component based in Prism

Yew Prism

Yew Prism is a highlighter code component based in Prism for yew

How it works

1. Install the prismjs node module

   npm install prismjs

2. Import the prismjs module and styles, and all the languages component which you want to use for highlighting, in your javascript/typescript main file yew project

import 'prismjs/themes/prism.css';
import 'prismjs';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-rust';
import module from '../crate/Cargo.toml';

module.run();

Note: You can use yew-parcel-template or another template described here to create a yew project

3. Add yew_prism in your cargo.toml

[dependencies]
yew = { version = "0.17", features = ["web_sys"]}
yew_prism="0.4"

4. Now you are ready to use the component 🚀

Example

use yew::prelude::*;
use yew_prism::Prism;

pub struct App;
impl Component for App {
    type Message = ();
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        App {}
    }

    fn update(&mut self, _: Self::Message) -> ShouldRender {
        false
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        html! {
            <Prism
                code="let greeting: &str = \"Hello World\";"
                language="rust"
            />
        }
    }
}

Run documentation page

1. git clone https://github.com/spielrs/yew_prism.git
2. cd yew_prism
3. npm install
4. npm start

License

Yew Prism is MIT licensed. See license