Moving some code blocks into centre column about shins HOT 10 CLOSED

Hmm, I think dynamically loading npm modules might be somewhat fraught.

Do you know of any other npm packages which allow this, so I could take a look?

We could add markdown-it-attrs as a dependency and (maybe) have it behind a guard option to ensure it doesn't break anything?

Are the code-blocks you want to keep in the centre-column using languages which are part of your language_tabs?

I wonder if it might be possible to simply add a <div class="something"> around things like the info.description in the main.dot template? Would that make your css fix less brittle?

from shins.

Hi. I tried adding a doc round the description markdown and a lot of the CSS broke. I’m guessing it might be the A > B stuff in the existing CSS

One of the languages is in the language tabs. It’s shell. I did wonder about using bash to differentiate but did seem a bit hacky. Might trip people up later on.

A guard option would good.

As an aside, there’s a good discussion on Mardown attributes in the extensions section of the CommonMark site: https://talk.commonmark.org/t/consistent-attribute-syntax/272

from shins.

Are you able to test from the github repository, or would you need an npm release?

I've tested it and it seems to work, though I noticed if I put a {.classname} after a markdown heading, it removed the automatic id from the generated html. This probably isn't an issue for you with pre/code blocks.

from shins.

Hi. I've done an example here: https://github.com/simondean/widdershins-issues/tree/master/markdown-attributes

The shins dependency in that example is pointing at the GitHub repo rather than at a release version on npmjs.com.

Here's the HTML produced by the example: https://simondean.github.io/widdershins-issues/markdown-attributes/

It looks like the code block isn't picking up the attributes. The class I've added in the markdown doesn't seem to appear in the HTML. I think that might be happening as the pre/code tags are added by shins rather than by markdown-it, which means the markdown-it-attrs lib doesn't get a chance to inject the extra attributes into the pre tag:

https://github.com/Mermade/shins/blob/master/index.js#L16

    highlight: function (str, lang) {
        var slang = lang.split('--')[0]; // allows multiple language tabs for the same language
        if (slang && hljs.getLanguage(slang)) {
            try {
                return '<pre class="highlight tab tab-' + lang + '"><code>' +
                    hljs.highlight(slang, str, true).value +
                    '</code></pre>';
            } catch (__) { }
        }

        return '<pre class="highlight"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }

Looking at the code in markdown-it https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js#L59 I'm guess that if shins returned the highlighted content without the pre/code tags, markdown-it would probably include the attributes from markdown-it-attrs in the pre tag but that would mean that shins would lose the ability to a) add multiple classes and b) add different classes depending on whether or not the language was known to the highlighter.

It's be handy if markdown-it accepted an object as the return type of the highlight() method. E.g. something like this:

    highlight: function (str, lang) {
        var slang = lang.split('--')[0]; // allows multiple language tabs for the same language
        if (slang && hljs.getLanguage(slang)) {
            try {
                return {
                      classes: ['highlight', 'tab,' 'tab-' + lang],
                      content: hljs.highlight(slang, str, true).value
                    };
            } catch (__) { }
        }

        return {
                classses: ['highlight']: {
                content: md.utils.escapeHtml(str)
              };
    }

from shins.

Maybe it matters what order I md.use() the plugins? Will have another look.

from shins.

Hi. Looking at the markdown-it code it looks like there's no way to access its slf.renderAttrs(token) function from within a custom highlight function. I'm guessing (I've not confirmed) that the slf.renderAttrs(token) function is how the markdown-it-attrs extension injects extra attributes into the HTML tags generated by markdown-it

I've raised issue markdown-it/markdown-it#456 on the markdown-it project to see whether they would be able to provide a way to access the slf.renderAttrs(token) function from within a custom highlight function.

In that issue I've suggested a couple of different ways they could make the slf.renderAttrs(token) function available from custom highlight function. If they can add support for this, I think some code like the following would be all that's needed to get the markdown-it-attrs extension working with shins for code blocks.

    highlight: function (str, lang, slf) {
        var slang = lang.split('--')[0]; // allows multiple language tabs for the same language
        if (slang && hljs.getLanguage(slang)) {
            try {
                tmpToken = {
                    attrs: [['class', 'highlight tab tab-' + lang]]
                };
                return '<pre' + slf.renderAttrs(tmpToken) + '><code>' +
                    hljs.highlight(slang, str, true).value +
                    '</code></pre>';
            } catch (__) { }
        }

        return '<pre class="highlight"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }

from shins.

@simondean went round in a bit of a circle trying to follow the other issues you opened. Any nearer a solution?

from shins.

Hi @MikeRalphson. Here's a couple of issues I raised with some more info on them:

• markdown-it/markdown-it#457
• arve0/markdown-it-attrs#59

People on both issues recommended implementing a custom renderer. I've tried writing a custom renderer on PR #33 and it seems to be working well.

from shins.

Any update on this? I would like to include code in the center column as it doesn't pertain to using the API itself. It really is separate from the API. Having it moved to the right column doesn't make sense as I have 3 columns for HTTP, Java, and Python, but the code snippet I want in the center column is none of those. It's a description of raw JSON configuration.

from shins.

Please continue the discussion over on slant if still an issue.

from shins.