Rosey/markdown-draft-js

Support fenced code block syntax highlighting

Closed this issue · 5 comments

mxstbr commented

GitHub lets you write fenced codeblocks with syntax highlighting:

const javascript = true;
const highlighted = true;

The syntax for defining the language to highlight as is

  ```javascript
  const javascript = true;
  const highlighted = true;

It'd be great if markdown-draft-js recognized that language declaration and added either a language or a syntax field to the data of the code block so that e.g. the draft-js-prism-plugin can pick it up.

Rosey commented

It would be amazing!

I think remarkable, the markdown parser we use, already supports this to some degree, so this may be quite simple to implement. Adding help wanted tag if someone wants to try, otherwise I'll take a look when I have some free time 😄

Rosey commented

Yeah so the language is included as params already by remarkable. So may just need to add data: item.params to the DefaultBlockTypes fence

Rosey commented

Releasing a change in 0.7.0 to include "language" as an optional data attribute to code blocks!

mxstbr commented

Awesome, thanks for the quick response @Rosey—sorry I missed your message to test this 😅

Rosey commented

hey no worries it's not your job :) Just was a favour. I did take a quick look at to be honest I think it may not work well with that plugin? No error messages but I didn't see any syntax highlighting either. But the data does seem to be correct so I thought perhaps it was an issue with the plugin rather than with the converter. Or I just was rushing my testing and did something wrong 🙃