Brackets are ignored for the title

[lanwen]

example:

js:title=a (b)

will complain about unable to find prism language 'js(b)' for highlighting

gatsby@2.15.14

[aileen]

I think this is a general issue when there is more than one word in the title. Also using"" doesn't help, which I think it should.

[aileen]

Looking at the code, this seems to be an issue within the node of the markdownAST already and I don't think it can/should be fixed here?

node.lang here already is split and has no concept of the second part of the string. This is saved in node.meta.

[aileen]

Also noteworthy, that this was no issue with Markdown files before, and only occurred since switching to MDX.

[DSchau]

Happy to take a PR here, but I am not sure this is a real issue.

How often (or why?) are you writing code with a language with a space in it? Is it data you can't control or what's the use case, exactly?

[lanwen]

that's not the language, but title of the snippet, isn't it? And plugin is called code title, not language title :) Also, anyway it's pretty often something like java 8 or go 13.

[DSchau]

It’s parsed as language by remark 👍

[aileen]

Just to give you an example, how we're using this in our code base for https://ghost.org/docs:

'''js:title=POST /admin/session/
{
    "username": "{email address}",
    "password": "{password}"
}
'''

(the ' are ofc ` in our code)

What happens is that /admin/session gets appended to the language, which looks then like language-js/admin/session/ and results in Prism not highlighting it.

But it also results in the code title being cut off, so the rendered output is POST only as code title.

For now, we worked around that by using a character that concatenates both parts, so it can get interpreted as one string.

I'm happy to help and contribute if you could point me in the right direction? Am I correct that this is not an issue that can be solved within this plugin?

[DSchau]

Ah, Ghost!

Well... if you’re using MDX, I’d recommend a custom code block component rather than this plugin! I recently wrote one for GatsbyJS.org:

https://github.com/gatsbyjs/gatsby/blob/master/www/src/components/code-block/index.js

It can be solved if the data is available at parse time with Remark, in any scenario though. This wasn’t a test case I added, so adding a fixture and validating the data structure (Markdown AST) would be a good start!

Happy to help however!

[DSchau]

Code order for this is quite simple, my guess is lang doesn’t contain everything, so tapping into meta if it exists and concatenation would be a perfectly fine approach!

https://github.com/DSchau/gatsby-remark-code-titles/blob/master/src/index.js#L9

[aileen]

Nice! I'll give this component a try! Thanks a lot! We recently moved all Markdown over to MDX and didn't refactor all files yet.

so tapping into meta if it exists and concatenation would be a perfectly fine approach!

I kinda had this PR ready but thought it might be too hacky and should be resolved upstream 😂
Happy to push the PR if you think the approach is fine.

[DSchau]

@AileenCGN hacky PRs more than welcome! Add a test or two, and I'll happily merge 🙌

[baerrach]

I'm having the same issue with space in the title.

Is there example usage of the MDX custom code block component?
Will this pass the code block onto other remark plugins, like prism?
(I'm currently using the remark pipeline to transform plantuml code blocks into plantuml svgs https://github.com/baerrach/gatsby-remark-plantuml)

As an aside, as the options for this plugin are obtained via query-string (see https://github.com/DSchau/gatsby-remark-code-titles/blob/master/src/index.js#L10)

    const options = qs.parse(params);
    const { title, ...rest } = options;

I was able to put spaces in the title by using %20

So in @AileenCGN's example it would be js:title=POST%20/admin/session/

[baerrach]

@lanwen so for your example it would be encoded as js:title=a%20%28b%29