Crate yew_prism[][src]

Expand description

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

How it works

  1. Install the prismjs node module

npm install prismjs

  1. 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';;

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

  1. Add yew_prism in your cargo.toml
yew = { version = "0.16", features = ["toml", "yaml", "msgpack", "cbor", "web_sys"]}
yew_prism = "0.3"

Note: Currently yew_prism only support web_sys feature. Maybe stdweb feature is included in the future depending if the library continues to be supported.

  1. Now you are ready to use the component 🚀


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 {

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

    fn view(&self) -> Html {
        html! {
                code="let greeting: &str = \"Hello World\";"


pub use prism::Prism;
pub use prism::Props;