Mermaid support

[3esmit]

How can I use kramdown with mermaid code blocks?

I am trying to implement this for fixing ethereum/EIPs#2450

I tried finding a way of making a custom behavior when ```mermaid blocks are found, which would be simply HTML escaping and wrapping around <div class="mermaid> </mermaid> and leaving the rest for js.

Can this be done through configuration?

[gettalong]

You need to write a syntax highlighter for this, see https://kramdown.gettalong.org/rdoc/Kramdown/Converter/SyntaxHighlighter.html. Your highlighter should probably delegate to another one like rouge for all other highlighting types.

[3esmit]

Hi. Thanks for the answer. I was navigating in that link you gave me, but I have a bit of difficulty as I never developed in ruby, but I can learn fast by examples.
Can you please provide me an example of plugin module using SyntaxHighligher?

Perhaps would be interesting to have this module by default in future, as mermaid is getting more popular... LaTeX is very powerful, but its syntax becomes a barrier to most of people, and mermaid came to help with a more "markdownish" way of making common graphs.

[gettalong]

Here you are: https://github.com/gettalong/kramdown/blob/master/lib/kramdown/converter/syntax_highlighter/rouge.rb and https://github.com/kramdown/syntax-coderay

[gettalong]

If you wanna create something that other people can use too, the second link should be helpful as this is a syntax highlighter for kramdown, delivered in its own Rubygem package.

[3esmit]

Thanks, that is very helpful!

For mermaid we would only need to import the js at the html header, and warp it around some divs... https://mermaid-js.github.io/mermaid/#/usage?id=define-a-chart-like-this

I guess for mermaid my plugin would look like this:

require 'kramdown/converter'

module Kramdown #:nodoc:

  module Options #:nodoc:
    define(:enable_mermaid, Boolean, true, <<EOF)
Enables mermaid
EOF
  end

  module Converter #:nodoc:
    module SyntaxHighlighter #:nodoc:
      module Mermaid

        VERSION = '0.0.1'

        def self.call(converter, text, lang, type, call_opts)
          return nil unless converter.options[:enable_mermaid]
          if lang && lang == "mermaid"
            "<div class=\"mermaid\">\n" << text << "\n</div>"
          else
            nil
          end
        rescue StandardError
          converter.warning("There was an error using Mermaid: #{$!.message}")
          nil
        end

        def self.options(converter, type)
          nil
        end

        
    end
    
    add_syntax_highlighter(:mermaid, SyntaxHighlighter::Mermaid)

  end

end

Not sure if it's worth packing such a simple code? Maybe it would be interesting to have a "graphs" plugin that support many of those, such as mermaid and plantuml...

[3esmit]

Seems like https://gitlab.com/gitlab-org/gitlab_kramdown would extend kramdown to have the features I am looking for.