Yew Prism

Yew Prism是一个基于Prism的yew代码高亮组件

工作原理

1. 安装prismjs节点模块

   npm install prismjs

2. 在你的javascript/typescript主文件yew项目中导入prismjs模块和样式，以及所有你想要用于高亮显示的语言组件

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();

注意：你可以使用yew-parcel-template或其他这里描述的模板来创建一个yew项目

3. 在你的cargo.toml中添加yew_prism

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

4. 现在你已经准备好使用这个组件了 🚀

示例

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"
            />
        }
    }
}