Syntax highlighting like on Github
On Github I can choose a language formatter by typing the language identifier after the first ``` 3 backticks, like this:
```js
my javascript code here
`` `
The extra space should be disregarded, only there to bypass the formatting end tag.
Would that be possible to implement in talkyard?
KajMagnus @KajMagnus2018-06-25 04:29:11.575ZHello Christian! Yes and i'd like to do that. Now the nearest time, I'm first going to add a rich text editor, and then I'll need to refactor code related to editing & Markdown (well, Commonmark), so I think it's better to wait with integrating with a highlighting lib, until after that.
I had a look at PrismJS and HighlightJS and some other syntax highlighting libraries. Is there anyone you like better than the others? It'd run server side, so one wouldn't need to load any extra Javascript code in the browsers — except for then opening the editor. Then it'd be needed, in the editor preview. Not sure how to determine which languages to load, then. If loading all languages, to make the preview work for "everything", ... then that might be a bit much Javascript, for mobile phones. On the other hand, trying to load only the languages that are needed, is a bit technically more complicated ... Will need to think a bit about how to do this :- ) maybe it's ok to, for a start, just support say PrismJS' default langauges? Which languages do you have in mind to highlight?
(Sorry for the a bi late reply, I a bit forgot about this, until recently when someone asked about PrismJS here — and, turns out that with an extra Javascript code snippet, one can make PrismJS work, in the browser (no server side rendering for now), more details in that topic)
- CChristian Scheuer @chrscheuer
Hi @KajMagnus. Thanks for getting back to me on this. As you know I didn't receive a notification for this until now.
Sounds great that you're looking to make syntax highlighting work. We would only be interested in Javascript support in the syntax highlighter.
We are using the open source Monaco code editor to edit the Javascript code, but anything that is able to show syntax highlighting for Javascript would work for us in the forum.I understand it makes sense to make rich text editing work first.
Fwiw we integrated Facebook's draftjs which is a React based rich text editor that is very well designed and engineered, and it just took a day or two. It is a great modern, React based way of creating possibly very complex mechanisms for code editing.
KajMagnus @KajMagnus2018-08-20 11:56:22.391ZHmm likely it'll take long, before syntax highlighting gets built in. Maybe better to add Prism.js yourself, for syntax highlighting, for now (see https://www.talkyard.io/-84/strange-problem-with-prismjs-syntax-highlighting ) — then you'll get something that works now directly.
(The other problem Mateusz refers to, in that topic, was that a too old Prism.js version was in use, + a max JS size limit which has since been increased so should be fine.)
Thanks for the tips about Draft. I read a while ago about Draft, ProseMirror, and "all other rich text editors out there", and ProseMirror got my attention because it also supports Markdown (converting between rich text and Markdown), and also has collaborative editing (many people editing the same text in parallel).
Now I see that Draftjs also kind of has Markdown support: https://github.com/withspectrum/draft-js-markdown-plugin. — I suppose I'd better take a look at Draftjs, ProseMirror and others, later when it's time to start with adding a rich text editor. The things I'm thinking can be take time, is to "port" [the plugins in use now and written for markdown-it] to the new editor. (There're plugins for
@mentionsand youtube links —> videos, for example.)- CChristian Scheuer @chrscheuer
Thanks @KajMagnus. Succesfully implemented Prismjs with auto selection of Javascript as a language in just 10 minutes thanks to your link. Yay!