Patch to add class .toc-h1, .toc-h2, etc to TOC

[pcmacdon]

The following patch adds a class to the TOC "a" tags so we can use CSS to control indent.
This is against the original, not "-plus"

--- vue-markdown.js.orig 2020-07-14 15:28:15.698495629 -0700
+++ vue-markdown.js 2020-07-14 22:32:31.651135683 -0700
@@ -10704,9 +10704,16 @@
tocMarkdown = generateTocMarkdownFromArray(tocArray, options);

    tocTokens = markdownItSecondInstance.parse(tocMarkdown, {});

•   // Adding tocClassName to 'ul' element
    if (_typeof(tocTokens[0]) === "object" && tocTokens[0].type === "bullet_list_open") {
  

•     for (var i = 0; i< tocTokens.length; i++) {
  

•        if (tocTokens[i].type === 'list_item_open') {
  

•            var attrs = tocTokens[i].attrs = tocTokens[i].attrs || [];
  

•            var lev = tocTokens[i].level;
  

•            if (lev>1) lev = Math.floor(1+(lev/2));
  

•            attrs.push(['class', 'toc-h'+lev]);
  

•        }
  

•      }
      var attrs = tocTokens[0].attrs = tocTokens[0].attrs || [];
      attrs.push(["class", options.tocClassName]);
    }
  

[pcmacdon]

FYI, given the limitations of TOC this patch is probably not really all that useful.

[Michael Mao]

Here's a quick suggestion for you to keep in mind next time you write a patch. It will be nice if you create a pull request rather than posting code on an issue. If we decide to incorporate your code, it would be less work for both the contributor and the reviewer.

[pcmacdon]

Thanks for the advice. As you can probably tell I'm new to git and github.

Anyways, as I mentioned this patch was against "vue-markdown" because the "vue-markdown-plus/dist/" is minified. And I am using the browser directly, not node or php.

I pasted the patch as I saw no "attach file" button, and so followed what it said at the bottom of the comment textarea:

"Attach files by dragging & dropping, selecting or pasting them"

Of course as it turns out to be the "attach button" in camouflage.