Filename for highlight.js / prism.js code snippets

Features & ideas
1

I would really find it helpful if i could dump file name headings on each code snippet. I’m not sure what you are deprecating highlight.js with, but prism.js lets you have these. Example below, from here https://www.taniarascia.com/es6-syntax-and-feature-overview/.

image
image.png797×289 5.36 KB

How it would work is if there is text directly adjacent to the ``` triple backticks like so, it would be triggered.

Example:

Yellow indicates linebreak so no filename is triggered

Alternatively , possibly have a setting to show what language the file is in as well would work. See here on prism.js

http://prismjs.com/plugins/show-language/

2

Hi Vincent,

Thank you for the suggestion.
Yeah, I understand that some people would prefer to have filename on the top of the code blocks.
BTW, the app uses CodeMirror to highlight syntax in code blocks in order to get a consistency with the editor for syntax highlightings.
You need to extend the Markdown parser and the renderer by making a plugin to get the desired result.

If you interested in making a plugin for it, I would be happy to help you.
Thanks!

3

Hi craftzdog

thanks for the quick response. I might make my own plugin later though, I just installed inkdrop yesterday :slight_smile:

If I do I’ll be sure to message you

Thanks
Vincent

4

Hello, I am interested in getting the filename in my code highlights, please provide readings to get started with this pluging development.

Thank you.

5

Hi Diego,

I’m happy to help you make a plugin.
The app uses remark to parse and render Markdown.
remark supports robust plugin system so you can extend it for what you want.
So first you have to create a remark parser plugin which recognizes filenames for codeblocks.

Cheers.