Working with SuperFences

[RoyiAvital]

It seems I can't get SuperFences to work on my file.
Specifically using a custom fence.

In the YAML I have this:

---
title: Report
summary: Just a report
author:
    - Royi
    - Or

settings:
    allow_css_overrides: true
    strip_yaml_front_matter: false
    image_path_conversion: base64

    js:
        - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js
        - res://MarkdownPreview/js/math_config.js
        - https://unpkg.com/mermaid@8.8/dist/mermaid.min.js

    markdown_extensions:
        - markdown.extensions.admonition
        - markdown.extensions.footnotes
        - markdown.extensions.tables
        - markdown.extensions.toc:
            title: Table of Contents
            toc_depth: 2-3
        - pymdownx.superfences:
            custom_fences:
                - name: mermaid
                  class: mermaid
                  format: pymdownx.superfences.fence_div_format
---

Yet for this code fence:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

I get:

Namely it doesn't yield any custom fence.

Here are the files to reproduce:

• TMP.md.
• TMP.txt (Change into TMP.css).

Another issue I saw, in case my user settings of MarkDown Preview is empty (Namely only: {}) the file above won't render at all. It seems the parsing of the YAML won't happen at all.

[facelessuser]

Did it work with the original example I gave using the old UML format? Is so, there shouldn't be much of a difference. What could be happening though I'd that the JS script isn't working like you think.

You are using a div output for the custom fences, so it should just look like normal text until the JS loader transforms it.

[RoyiAvital]

I have just written below what I found to be working. Is it by design?

By the way, is this by design as well:

Another issue I saw, in case my user settings of MarkDown Preview is empty (Namely only: {}) the file above won't render at all. It seems the parsing of the YAML won't happen at all.

[RoyiAvital]

OK, It seems documentation is wrong.
IF one looks at the UML Diagram Example at https://facelessuser.github.io/pymdown-extensions/extensions/superfences/#uml-diagram-example, the code says: 'format': pymdownx.superfences.fence_div_format which translates to what I wrote above.

Yet, in MarkDown Preview, the default config file configures custom fences as following:

Hence I tried:

        - pymdownx.superfences:
            custom_fences:
                - name: mermaid
                  class: mermaid
                  format: !!python/name:pymdownx.superfences.fence_div_format

Which works (By the way, format: !!python/name:pymdownx.superfences.fence_code_format won't work).

Hence I suggest updating the documentation.

[RoyiAvital]

But the default configuration is JSON and it uses "format": {"!!python/name": "pymdownx.superfences.fence_code_format"} while the documentation drops it. Or do you mean that div require the python function while code doesn't? But if I use fence_code_format without the function the class isn't even in the HTML code.

[facelessuser]

There are two things here. The doc is showing how things are specified in Sublime settings files (JSON).

The second thing is Mermaid, by default, looks for divs. I don't use it's default loader myself. In a different discussion I pointed you at my Mermaid notes. As nice as Mermaid seems, the library is flawed in a number of places. Since I had to work around those issues, I also just had my personal loader use code blocks as it provides a nice fallback.

When I add Mermaid support here, I'll use code blocks.

I couldn't tell what the complaint was about, but I probably didn't read close enough :). I'm not in front of my computer.

[facelessuser]

Oh, I see. You are trying to bridge the Pymdown Extenstion docs with the Markdown Preview docs. Pymdown is showing how to do it directly in Python.

Markdown Preview is correct with implementing it in the JSON settings in Sublime. It was kind of a custom way to identify the request to import and use Python methods.

In YAML, you can use Pyaml 's approach. I know...it is very confusing. I probably could have attempted to bridge the gap between Pyaml's method and the Sublime setting file.

As you can probably guess, most people don't ask about this, so I've never revisited it.

[RoyiAvital]

When I add Mermaid support here, I'll use code blocks.

OK. I guess we need to cross fingers for built in support for this.
With GitHub support added to mermaid I guess the library will get much more robust.

[facelessuser]

OK. I guess we need to cross fingers for built in support for this.

It's not really too hard to add. There is a working example here on Codepen: https://codepen.io/facelessuser/pen/oNeNydQ. It's just a matter of me adding the things at this point.

With GitHub support added to mermaid I guess the library will get much more robust.

I sure hope so 🙂.

[facelessuser]

Mermaid support is now available on master and will be in the next release. By default, the SuperFence option will be in the settings, but a user will need to add the mermaid script and mermaid configuration to the Sublime Text settings file or the YAML frontmatter.