search

mgaitan / sphinxcontrib-mermaid

Mermaid diagrams in yours sphinx powered docs
http://sphinxcontrib-mermaid-demo.readthedocs.io/en/latest/
Other
338 stars 96 forks source link

documentation to have fontawesome working not clear #92

Open LuisBL opened 2 years ago

LuisBL commented 2 years ago

Mermaid as basic support for fontawesome Cf. https://mermaid-js.github.io/mermaid/#/flowchart?id=basic-support-for-fontawesome

It's working with cli and on live-editor with e.g.
see it on live-editor

flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)

I guess that should be something like below (not working my side):

The CDN way

on conf.py set the mermaid_fontawesome_uri variable:

$ grep font-awe conf.py
mermaid_fontawesome_uri="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
$

that will make sphinxcontrib-mermaid add the below <link to the header: 

<link rel="stylesheet" 
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
         integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Or to have it working offline:

download the version 5 kit

image

_static$ unzip -q fontawesome-free-5.15.4-web.zip 
/_static$ ls
fontawesome-free-5.15.4-web.zip fontawesome-free-5.15.4-web
_static$ vim ../conf.py  # set html_js_files
_static$ grep fonta ../conf.py
html_js_files = ['_static/fontawesome-free-5.15.4-web', 'path/to/all.js']
_static$ cd ..
$ make clean html
benjaoming commented 1 year ago

Using the raw format on a Sphinx project that already has FontAwesome works for me. When this happens, the output diagram is an svg object directly in the generated HTML.

When I use the svg format and mmdc is used, a file is referenced with a <object data="_images/mermaid-e69675f27cbad9b86a0cf3d0587fabe390ac1501.svg" type="image/svg+xml">

It would be nice with an option to keep generating the SVG but to have all of the contents directly injected into the HTML structure in an <svg> tag, same as what raw amounts to. That way, CSS rules will work without injecting into the <object> frame.

benjaoming commented 1 year ago

I think the fact that this works on mermaid-live-editor is that they inject something into the generated SVG?

https://github.com/mermaid-js/mermaid-live-editor/pull/849/files

LuisBL commented 6 months ago

Any news on this one ?

The documentation has been update to deal with Font Awesome v6.5.1 but still no working despite <link href=... set my side

Adding this snippet in the would add support for Font Awesome v6.5.1 html

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />

LuisBL commented 6 months ago

Right now I get it working (in both html and latexpdf) with this modification on conf.py

extensions = ['sphinxcontrib.mermaid']
fonta = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'
def setup(app):
    app.add_css_file(fonta)