项目作者: dancespiele

项目描述 :
highlighter code component based in Prism
高级语言: Rust
项目地址: git://github.com/dancespiele/yew_prism.git
创建时间: 2020-04-16T23:38:02Z
项目社区:https://github.com/dancespiele/yew_prism

开源协议:MIT License

下载


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

  1. import 'prismjs/themes/prism.css';
  2. import 'prismjs';
  3. import 'prismjs/components/prism-markup';
  4. import 'prismjs/components/prism-rust';
  5. import module from '../crate/Cargo.toml';
  6. module.run();

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
  1. [dependencies]
  2. yew = { version = "0.17", features = ["web_sys"]}
  3. yew_prism="0.4"
  1. Now you are ready to use the component 🚀

Example

  1. use yew::prelude::*;
  2. use yew_prism::Prism;
  3. pub struct App;
  4. impl Component for App {
  5. type Message = ();
  6. type Properties = ();
  7. fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
  8. App {}
  9. }
  10. fn update(&mut self, _: Self::Message) -> ShouldRender {
  11. false
  12. }
  13. fn change(&mut self, _props: Self::Properties) -> ShouldRender {
  14. false
  15. }
  16. fn view(&self) -> Html {
  17. html! {
  18. <Prism
  19. code="let greeting: &str = \"Hello World\";"
  20. language="rust"
  21. ></Prism>
  22. }
  23. }
  24. }

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