verticator cannot display well when using reveal-md

[x-zheng16]

Hello,

Recently I used reveal-md to create my presentation and found this fancy plugin. I've successfully added another helpful plugin reveal.js-menu, but verticator cannot work well with the same configure process. The dots appear in the left corner and are not interactive like the demo shows. I've tried to disable other plugins and only enable verticator to avoid occasion.

Please refer to the screenshot for details.

[Martinomagnifico]

Hi @x-zheng16, can you provide a minimum example on something like CodePen? The screenshot does not really help.

[x-zheng16]

Hi @x-zheng16, can you provide a minimum example on something like CodePen? The screenshot does not really help.

Sure. Thanks for your quick reply.

According to How to add reveal.js plugins, I modified the following configuration files to configure reveal-md and verticator.

Related configure files

reveal-md.json

This file is to configure reveal-md.js to add certain plugins with paths provided.

{
    "separator": "\n---\n",
    "verticalSeparator": "\n----\n",
    "theme": "black",
    "highlightTheme": "atom-one-dark",
    "template": "reveal.html",
    "scripts": [
        "plugin/reveal.js-menu/menu.js",
        "plugin/verticator/verticator.js",
        "plugin.js"
    ]
}

reveal.json

This file aims to pass options to reveal.js and certain plugin .js.

{
    "controls": false,
    "progress": false,
    "slideNumber": "c/t",
    "transition": "none",
    "menu": {
        "side": "left",
        "numbers": "c",
        "openButton": false,
        "openSlideNumber": true
    }
    "verticator": {
        "darktheme": true
    }
}

plugin.js

This file is required to push and load the plugin.

options.plugins.push(
    RevealMenu,
    Verticator,
);

Problem discription

When I use these configure files, the plugin reveal.js-menu can work correctly according to my specific options. However, Verticator fails. Sorry but I'm not familir with javascipt programming and don't know how to provide a log info generated by verticator for you to locate the issue.

[Martinomagnifico]

It's a matter of getting some paths correct (and a typo in your reveal.json). Verticator installs as a full demo, with links to a nested /plugin folder. The file verticator.js is in that nested folder. You might also move the contents up to the first /plugin folder and adjust the link accordingly.

reveal-md.json:

{
    "separator": "\n---\n",
    "verticalSeparator": "\n----\n",
    "theme": "black",
    "highlightTheme": "atom-one-dark",
    "template": "reveal.html",
    "scripts": [
        "plugin/reveal.js-menu/menu.js",
        "plugin/reveal.js-verticator/plugin/verticator/verticator.js",
        "plugin.js"
    ]
}

And you missed a comma in reveal.json:

{
    "controls": false,
    "progress": false,
    "slideNumber": "c/t",
    "transition": "none",
    "menu": {
        "side": "left",
        "numbers": "c",
        "openButton": false,
        "openSlideNumber": true
    },
    "verticator": {
        "darktheme": true
    }
}

That's all. Don't forget to also load the Verticator CSS with the command: reveal-md demo.md --css plugin/reveal.js-verticator/plugin/verticator/verticator.css

[x-zheng16]

It's a matter of getting some paths correct (and a typo in your reveal.json). Verticator installs as a full demo, with links to a nested /plugin folder. The file verticator.js is in that nested folder. You might also move the contents up to the first /plugin folder and adjust the link accordingly.

reveal-md.json:

{
    "separator": "\n---\n",
    "verticalSeparator": "\n----\n",
    "theme": "black",
    "highlightTheme": "atom-one-dark",
    "template": "reveal.html",
    "scripts": [
        "plugin/reveal.js-menu/menu.js",
        "plugin/reveal.js-verticator/plugin/verticator/verticator.js",
        "plugin.js"
    ]
}

And you missed a comma in reveal.json:

{
    "controls": false,
    "progress": false,
    "slideNumber": "c/t",
    "transition": "none",
    "menu": {
        "side": "left",
        "numbers": "c",
        "openButton": false,
        "openSlideNumber": true
    },
    "verticator": {
        "darktheme": true
    }
}

That's all. Don't forget to also load the Verticator CSS with the command: reveal-md demo.md --css plugin/reveal.js-verticator/plugin/verticator/verticator.css

Thanks a lot. It works now. Manually loading the Verticator CSS is the critical step, which is different from the autoloading behavior of reveal.js-menu.

[Martinomagnifico]

The latest version of Verticator now autoloads the styles.