How to add reveal.js plugins ? #102

Sigmun · 2017-04-20T09:55:14Z

Following the Tool link provided in the Readme, I need to add some plugins in my slides (menu, charts,chalkboard...). How to proceed since reveal-md uses its own reveal.js ?

webpro · 2017-04-23T08:52:42Z

Currently reveal-md has no support for adding extra reveal.js plugins.

For what it's worth: these plugins are already included:

reveal-md/lib/template/reveal.html

Lines 45 to 53 in 73d1476

    
           var deps = [ 
        
             { src: '{{{base}}}/lib/js/classList.js', condition: function() { return !document.body.classList; } }, 
        
             { src: '{{{base}}}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } }, 
        
             { src: '{{{base}}}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } }, 
        
             { src: '{{{base}}}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, 
        
             { src: '{{{base}}}/plugin/zoom-js/zoom.js', async: true }, 
        
             { src: '{{{base}}}/plugin/notes/notes.js', async: true }, 
        
             { src: '{{{base}}}/plugin/math/math.js', async: true } 
        
           ];

I don't know how other (third party) plugins should be added, perhaps this feature is easy to add to reveal-md.

JohnGuan · 2020-09-07T03:41:42Z

@webpro Does reveal-md has support for adding extra reveal.js plugins now?

webpro · 2020-09-07T07:44:11Z

No, not really. There are two options:

Copy the default template and add the plugins there (and use it with --template)
Fork reveal-md (and submit a pull request) to add (and disable?) plugins.

Edit: I forgot to add the option to add custom scripts (--script) which could also work fine for reveal.js plugins.

JohnGuan · 2020-09-14T05:49:57Z

I tried to add blow content into reveal.json, but it turns plugins name to string, so it can't initialize normally.

{
    "plugins":[
        "RevealChalkboard",
        "RevealMenu"
        ]
}

I think if we use js code to config reveal.js options will be better for add, enable or disable plugins.

blow is reveal-md.json content

{
    "scripts": [
        "plugin/chalkboard/plugin.js",
        "plugin/reveal.js-menu/menu.js"
        ]
  }

JohnGuan · 2020-09-15T06:24:53Z

I found a way to add Third Party plugins.

First, specify the location of the plugins in the reveal-md.json file.
The last item 'plugin.js' is reserved for enabling plugins.

{
    "scripts": [
        "plugin/chalkboard/plugin.js",
        "plugin/reveal.js-menu/menu.js",
        "plugin.js"
        ]
  }

Then write in plugin.js which plugins need to be enabled

options.plugins.push(
    RevealChalkboard,
    RevealMenu
);

Aircl0wn · 2020-10-16T18:57:13Z

work great.
@JohnGuan do you have a way of passing on config to the plugins by any chance?

stale · 2020-12-19T07:48:14Z

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

jvanheugten · 2020-12-28T15:06:21Z

@Aircl0wn : To add a config for a plugin, create a reveal.json file:

Example for the config of the chalkboard plugin:

{
    "chalkboard": {
        "boardmarkerWidth": 10,
        "chalkWidth": 10,
        "readOnly": false,
        "src": "test.json",
        "toggleChalkboardButton": { "left": "30px", "bottom": "30px", "top": "auto", "right": "auto" },
        "toggleNotesButton": { "left": "30px", "bottom": "30px", "top": "auto", "right": "auto" },
        "eraser": {"radius": 50, "src": "plugins/chalkboard/img/sponge.png"}
    }
}

Note that the options should be in json format, so all strings should have quotations.

It would be great to add this to the reveal-md documentation.

Aircl0wn · 2021-01-03T20:03:24Z

thnx @jvanheugten !

webpro · 2021-05-09T10:20:42Z

Thanks @JohnGuan and @jvanheugten! I added this to the readme the other day: https://github.com/webpro/reveal-md#scripts-preprocessors-and-plugins.

krillin666 · 2021-05-12T18:44:24Z

@jvanheugten @webpro

Excuse me before hand if I'm missing something obvious. However, I cannot enable the TOC-progress plugin https://github.com/e-gor/Reveal.js-TOC-Progress. I've enable other plugins but with this one I fail with every attempt.
I load the plugin javascript in the appropriate reveal-md.json file but I haven't figured out how to initialize it in the plugin.js file.
I've tried:

RevealTocprogress
RevealToc-progress
RevealTOC-progress
RevealTOC_progress

Any hint ?

Thank you !

webpro · 2021-05-12T22:56:45Z

https://github.com/e-gor/Reveal.js-TOC-Progress/blob/master/plugin/toc-progress/toc-progress.js#L14

So that would be toc_progress

krillin666 · 2021-05-13T07:29:56Z

https://github.com/e-gor/Reveal.js-TOC-Progress/blob/master/plugin/toc-progress/toc-progress.js#L14

So that would be toc_progress

Hey thanks for the quick answer. However, I think I had tried that too but to no avail.

Just to be sure, my plugin.js is :

   1   │ options.plugins.push(
   2   │     RevealMenu,
   3   │     RevealAnimate,
   4   │     RevealAnything,
   5   │     RevealChart,
   6   │     RevealMath,
   7   │     toc_progress
   8   │ );

And my reveal-md.json file is:

   1   │ {
   2   │     "scripts": [
   3   │         "plugin/reveal.js-menu/menu.js",
   4   │         "plugin/anything/plugin.js",
   5   │         "plugin/reveal.js-plugins/animate/plugin.js",
   6   │         "plugin/reveal.js-plugins/animate/svg.min.js",
   7   │         "plugin/chalkboard/plugin.js",
   8   │         "plugin/chart/Chart.min.js",
   9   │         "plugin/chart/plugin.js",
  10   │         "plugin/math/math.js",
  11   │         "plugin/toc-progress/toc-progress.js",
  12   │         "plugin.js"
  13   │     ]
  14   │ }

But when I run reveal-md a.md --script plugin.js -w --css twocolumns.css --theme white the TOC does not appear:

Thank you for your time !

webpro · 2021-06-20T07:36:35Z

But when I run reveal-md a.md --script plugin.js

The argument is scripts (not script)

Ouch1978 · 2021-08-12T11:15:46Z

@JohnGuan

May I know if this way still working or not?

I've tried with the following process, but cannot make the menu show up.

Run yarn add reveal.js-menu.
Create a folder named "plugin".
Copy reveal.js-menu from node_modules to the plugin folder.
Add the following content into reveal-md.json:

    "scripts": [
        "plugin/reveal.js-menu/menu.js",
        "plugin.js"
    ]

Add a new file named plugin.js, and add the following content:

options.plugins.push(
  RevealMenu
);

run reveal-md with command:

reveal-md slides/Test1.md --scripts plugin.js

Would you please tell me if I did something wrong?

Thank you.

Aircl0wn · 2021-08-12T19:34:56Z

@Ouch1978 : is your scripts block in reveal-md.json inside accolades?

{
    "scripts": [
        "plugin/reveal.js-menu/menu.js",
        "plugin.js"
    ]
}

Ouch1978 · 2021-08-13T02:22:19Z

@Aircl0wn

Yes, I did.

It's

{
    "separator": "\n---\n",
    "verticalSeparator": "\n----\n",
    "scripts": [
        "plugin/reveal.js-menu/menu.js",
        "plugin.js"
    ]
}

Ouch1978 · 2021-08-13T10:49:01Z

I finally figure it out.

Just execute

reveal-md slides/Test1.md

without --scripts plugin.js is working for me.

Aircl0wn · 2021-08-13T20:15:31Z

Yes, that's what I'm doing as well.
Didn't think that would matter, hence why I looked elsewhere. Glad it's working.

Thus0 · 2022-02-24T16:18:21Z

@krillin666 : did the plugin "toc_progress" worked out of the box ? The plugin seems to be loaded but the toc does not appear in the footer. I loaded "RevealMenu" plugin so I think my reveal.json, plugin.json and reveal-md.json are correct

toc_progress seems to parse <h1>, <h2> and <h3> headers so I tried to preprocess the markdown file but with no luck so far.

Anyone use also the toc_progress ?

lukenavo · 2022-10-04T04:24:03Z

Sorry for bother you all, but I'm not able to install chalkboard plugin in my reveal-md slide.
I have a lot of doubts...
1 - is it possible to have chalkboard in a static output slide?
2 - I've downloaded the entire plugin collection. Where must I put it? I have to install them with some command? I have put them in /plugin where there are *.md files
3 - I've create a reveal-md.json in the same location of .md file with:

{
"scripts": [
"plugin/chalkboard/plugin.js",
"plugin.js"
]
}

then I create plugin.js in the same location of .md file with:

options.plugins.push(
RevealChalkboard,
RevealMenu
);

but when I start the command
reveal-md name.md --static
or
reveal-md name.md

no chalkboard appears. What is wrong?

Thanks for any suggesion,
Luca

lukenavo · 2022-10-04T04:26:04Z

Sorry, plugin.js is:
options.plugins.push(
RevealChalkboard
);

jackyliu16 · 2022-12-05T06:00:47Z

my solution

My problem seem could be fix by manual copy the plugin/reveal.js-memu into _assets/plugin/reveal.js-menu, but it couldn't been solve by reveal-md.cmd ./hello.md --static output --static-dirs=plugin/reveal.js-menu，i'm trying to find a new ways to solve this problem, but seem this maybe could help you @lukenavo ?

Problems in the past

Sorry for bother you all, but I'm not able to install chalkboard plugin in my reveal-md slide. I have a lot of doubts... 1 - is it possible to have chalkboard in a static output slide? 2 - I've downloaded the entire plugin collection. Where must I put it? I have to install them with some command? I have put them in /plugin where there are *.md files 3 - I've create a reveal-md.json in the same location of .md file with:

{ "scripts": [ "plugin/chalkboard/plugin.js", "plugin.js" ] }

then I create plugin.js in the same location of .md file with:

options.plugins.push( RevealChalkboard, RevealMenu );

but when I start the command reveal-md name.md --static or reveal-md name.md

no chalkboard appears. What is wrong?

Thanks for any suggesion, Luca

One interesting thing is that I don't have a way to cover RevealMenu in static output (but I can cover it in direct open by reveal-md.cmd slides.md).

even i have seem the plugins has been include in index.html

    <script src="./_assets/./plugin/reveal.js-menu/menu.js"></script>
    <script src="./_assets/./plugin/chalkboard/plugin.js"></script>
    <script src="./_assets/./plugin/plugin.js"></script>

and _assets/plugin/plugin.js

options.plugins.push(
    RevealMenu          // left menu
);

but it couldn't display the menu buttom(by the ways i have add `console.log("sth") into this js plugins, and it could display in f12, which i guess means that this plugins has been contain in html file successed but not working[i actually not familiar with js])

And as soon as I tried to introduce the RevealChalkboard script into my program, the entire page would not be displayed

~~

MukundMohanan · 2023-03-06T09:50:09Z

Hi,

I'm trying to add RevealChart plugin to my presentation but got an error in browser console

Uncaught ReferenceError: RevealChart is not defined
    at plugin.js:2:5

Below is my complete set-up

Project structure

│── plugin
│       └─ chart
│             └─ Chart.min.js
│             └─ plugin.js
│
│── src
│          └─README.md
│── plugin.js
│── reveal-md.json
│── reveal.json

plugin.js

options.plugins.push(
    RevealChart,
);

reveal.json

{
    "chart": {
		"defaults": {
			"color": "lightgray",
			"scale": {
				"beginAtZero": true,
				"ticks": { "stepSize": 1 },
				"grid": { "color": "lightgray" }
			}
		},
		"line": { "borderColor": [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ], "borderDash": [ [5,10], [0,0] ] },
		"bar": { "backgroundColor": [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ]},
		"pie": { "backgroundColor": [ ["rgba(0,0,0,.8)" , "rgba(220,20,20,.8)", "rgba(20,220,20,.8)", "rgba(220,220,20,.8)", "rgba(20,20,220,.8)"] ]}
	}
}

reveal-md.json

{
    "separator": "^\n\n\n",
    "verticalSeparator": "^\n\n",
    "scripts": [
        "plugin/chart/Chart.min.js",
        "plugin/chart/plugin.js",
        "plugin.js"
    ]
}

plugin/chart/plugin.js has code from chart plugin from reveal.js-plugins

plugin/chart/Chart.min.js has code from char min js from cdn

and I run reveal-md src/README.md --scripts plugin.js.

I'm stuck with the error in browser console saying

Uncaught ReferenceError: RevealChart is not defined
    at plugin.js:2:5

webpro · 2023-03-09T14:04:17Z

In general, some issues seem to come from the fact that the CLI config (--scripts) has higher priority than the local config in reveal.json and overrides the latter completely (it does not merge the items in the array or something). So you should use either the cli argument --scripts OR the JSON config "scripts": [].

What also may help is to look in the resulting HTML (use the inspector in the browser) and look for the <script> tags near the end of the <body>.

OlegHahm · 2023-10-18T12:20:00Z

@krillin666 @Thus0
Has anyone managed to use a ToC plugin?

webpro closed this as completed Apr 23, 2017

webpro mentioned this issue May 3, 2017

How to use KaTex instead of MathJax? #107

Closed

webpro reopened this Sep 7, 2020

stale bot added the wontfix label Dec 19, 2020

stale bot removed the wontfix label Dec 28, 2020

webpro closed this as completed May 9, 2021

Ouch1978 mentioned this issue Aug 12, 2021

Add reveal.js-menu plugin #312

Closed

x-zheng16 mentioned this issue May 16, 2022

verticator cannot display well when using reveal-md Martinomagnifico/reveal.js-verticator#7

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add reveal.js plugins ? #102

How to add reveal.js plugins ? #102

Sigmun commented Apr 20, 2017 •

edited

Loading

webpro commented Apr 23, 2017

JohnGuan commented Sep 7, 2020

webpro commented Sep 7, 2020 •

edited

Loading

JohnGuan commented Sep 14, 2020

JohnGuan commented Sep 15, 2020 •

edited

Loading

Aircl0wn commented Oct 16, 2020

stale bot commented Dec 19, 2020

jvanheugten commented Dec 28, 2020

Aircl0wn commented Jan 3, 2021

webpro commented May 9, 2021

krillin666 commented May 12, 2021 •

edited

Loading

webpro commented May 12, 2021

krillin666 commented May 13, 2021

webpro commented Jun 20, 2021

Ouch1978 commented Aug 12, 2021

Aircl0wn commented Aug 12, 2021

Ouch1978 commented Aug 13, 2021

Ouch1978 commented Aug 13, 2021

Aircl0wn commented Aug 13, 2021

Thus0 commented Feb 24, 2022 •

edited

Loading

lukenavo commented Oct 4, 2022

lukenavo commented Oct 4, 2022

jackyliu16 commented Dec 5, 2022 •

edited

Loading

MukundMohanan commented Mar 6, 2023 •

edited

Loading

webpro commented Mar 9, 2023

OlegHahm commented Oct 18, 2023

How to add reveal.js plugins ? #102

How to add reveal.js plugins ? #102

Comments

Sigmun commented Apr 20, 2017 • edited Loading

webpro commented Apr 23, 2017

JohnGuan commented Sep 7, 2020

webpro commented Sep 7, 2020 • edited Loading

JohnGuan commented Sep 14, 2020

JohnGuan commented Sep 15, 2020 • edited Loading

Aircl0wn commented Oct 16, 2020

stale bot commented Dec 19, 2020

jvanheugten commented Dec 28, 2020

Aircl0wn commented Jan 3, 2021

webpro commented May 9, 2021

krillin666 commented May 12, 2021 • edited Loading

webpro commented May 12, 2021

krillin666 commented May 13, 2021

webpro commented Jun 20, 2021

Ouch1978 commented Aug 12, 2021

Aircl0wn commented Aug 12, 2021

Ouch1978 commented Aug 13, 2021

Ouch1978 commented Aug 13, 2021

Aircl0wn commented Aug 13, 2021

Thus0 commented Feb 24, 2022 • edited Loading

lukenavo commented Oct 4, 2022

lukenavo commented Oct 4, 2022

jackyliu16 commented Dec 5, 2022 • edited Loading

my solution

Problems in the past

MukundMohanan commented Mar 6, 2023 • edited Loading

webpro commented Mar 9, 2023

OlegHahm commented Oct 18, 2023

Sigmun commented Apr 20, 2017 •

edited

Loading

webpro commented Sep 7, 2020 •

edited

Loading

JohnGuan commented Sep 15, 2020 •

edited

Loading

krillin666 commented May 12, 2021 •

edited

Loading

Thus0 commented Feb 24, 2022 •

edited

Loading

jackyliu16 commented Dec 5, 2022 •

edited

Loading

MukundMohanan commented Mar 6, 2023 •

edited

Loading