search

code-hike / codehike

Build rich content websites with Markdown and React
https://codehike.org
MIT License
4.68k stars 142 forks source link

Mermaid Support #108

Closed NukaCody closed 2 years ago

NukaCody commented 2 years ago

This may be out of scope of Code Hike, but I'm curious to get your thoughts. Is there plans on implementing mermaidjs? So graphs can be rendered alongside with

``mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Albeit it may be hard to justify as you can also build diagrams with mermaid live editor or plantuml and simply import the image.

Here's an example for others who are trying to solve something similiar

Code Hike will apply syntax highlighting to any code block

``js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}

<img src="./assets/test.svg" alt=""/>
Screen Shot 2022-01-11 at 12 03 02 AM
pomber commented 2 years ago

Hey, I think there are remark plugins that already do that. There are some places where I want to add more extensibility, allowing the user to pass custom components as children to CodeHike's components, I'll try to make sure that it plays nicely with mermaid codeblocks.