Filename for highlight.js / prism.js code snippets

plugin-idea

(Vincent Tang) #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/.

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/


(Takuya Matsuyama) #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!


(Vincent Tang) #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


(Diego Torres Fuerte) #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.


(Takuya Matsuyama) #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.