Skip to content

jiegec/mkdocs-wavedrom-plugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mkdocs-wavedrom-plugin

A MkDocs plugin, render waveform charts in the wavedrom style.

Installation

Install this package with pip.

from GitHub

pip install git+https://github.com/jiegec/mkdocs-wavedrom-plugin

How to use

More information about plugins in the MkDocs documentation

write markdown/wavedrom code

embed your wavedrom code in markdown documents.

```wavedrom
{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }
```

or see a sample markdown for the sample.

setup mkdocs.yml

change mkdocs.yml to use this plugin.

site_name: test
plugins:
    - wavedrom
        embed_svg: false # true if embedding svg in html
        pymdownx: false # true if using pymdownx

extra_javascript:
    # - wavedrom.unpkg.js
    # - skin-default.js
    # above, place *.js in docs directory, or below from internet.
    - https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js
    - https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js

If you use pymdownx.superfences, add the following config:

plugins:
    - wavedrom
        embed_svg: false # true if embedding svg in html
        pymdownx: true # true if using pymdownx
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: wavedrom
          class: wavedrom
          format: !!python/name:markdownwavedrom.plugin.fence_wavedrom_format

You can convert wavedrom json to svg when building:

plugins:
    - wavedrom
        embed_svg: true # true if embedding svg in html
        pymdownx: false # true if using pymdownx
# no longer required to include these javascript sources
extra_javascript:
    # - wavedrom.unpkg.js
    # - skin-default.js
    # - https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js
    # - https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js

If you use navigation.instant with mkdocs-material, embed_svg: true and pymdownx: true are required for instant navigation to work properly with wavedrom.

Demo

from local

$ python -m venv env
$ ./env/bin/python setup.py install
$ ./env/bin/mkdocs build
$ ./env/bin/mkdocs serve &
$ browse http://localhost:8000/test/index.html

or make build and browse site/test/index.html, if you have make binary.

(optional) download wavedrom

to download javascript files to local

$ make download

Thanks

a lot part of this plugin were came from mkdocs-mermaid-plugin

About

A MkDocs plugin for support wavedrom charts in markdown file

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Python 94.7%
  • Makefile 5.3%