Rocket.chat: Better Syntax highlighting

[joshkel]

Syntax highlighting for ``` code blocks would be nifty.

My personal preference would be for something like GitHub Flavored Markdown's syntax highlighting, simply because that's what I'm most familiar with, but I don't have a strong opinion on this.

[geekgonecrazy]

So turns out this is kind of here. We just need to improve the css for this so its a little more obvious.

[engelgabriel]

I don't understand.. we already have the feature.. so what is the request here?

[engelgabriel]

[joshkel]

From playing around with this, there are several shortcomings. For example:

I don't see the ``` syntax documented anywhere in the current software. (The only information I can find on formatting in general is a bullet point mention of "Markdown" under features and a very brief list of some syntax in the lower right corner of chat.)

I can't find any list of supported languages.

The syntax highlighting isn't very good. For example:

• In your example, require should be highlighted as a keyword.
• array shows up as a built-in in C++ code. (It isn't.)
• The attached screenshot shows the same code highlighted differently C and C++, but C and C++ should be highlighted the same in this case. (The C version is mostly correct - printf shouldn't be highlighted as a built-in, IMO, and highlighting %i within the string is correct - although neither version correctly gives keywords for and int a different appearance than the variable name i).
  

None of this is a high priority for us right now, but if you'd like me to open any of these as separate issues, please let me know.

[engelgabriel]

Did you specify the language after the ```?

We currently use https://github.com/stubailo/meteor-highlight.js/tree/master

But we can add support to https://github.com/codemirror/codemirror if you think it is more powerful?

[fduraibi]

I think we need an option to not highlight the code, currently it always highlights which is not always the right thing. for example it highlights command line instructions incorrectly:

my work around is to label it as java (and that works most of the time, might not always be true)

also as you see it is not working correctly under Firefox, as the backtick is causing some problem. While in chrome it works fine (same output on chrome)

[geekgonecrazy]

Seems like maybe we should look at codemirror. Or something with a bit better syntax highlighting

[vetash]

+1

[Deadlyhacker]

Yes add this please +1

[jseadragon]

+1, I'd love to see this get improved. Being a C++ developer, I second everything that @joshkel said about the C / C++ syntax highlighting.

[engelgabriel]

@rodrigok now that we have codemirror, should we use it for the Syntax highlighting?

[reyman]

I try to highlight scala code, but it seems not supported using ```scala :/
Any news here ?

[Franziskus1988]

@engelgabriel Do you have an up-to-date documentation about the code highlighting topic with a list of supported languages and explanation on how to use this? It seems this site is outdated: https://sourceforge.net/p/rocketchat/wiki/markdown_syntax/

[geekgonecrazy]

@Franziskus1988 i'm not sure where that particular documentation came from. But our official documentation can be found here: https://rocket.chat/docs And nothing more detailed then that currently, sorry.

[b0c1]

The main problem with using meteor highlight js is: the integrated highlight js is 2 years old (Oct 28, 2014)
Not plan to upgrade the highlight js (in a forked repository) or using highlight.js directly in the application?

[Rohlik]

This is solved in https://github.com/RocketChat/Rocket.Chat/commit/ffc0bdaed34af88bddc16d7eedb2cfeb635cd0d3, right?

[joshkel]

@Rohlik - From testing the Docker image of 0.54.0, most of the problems I listed here are still an issue:

1. Whatever theme or stylesheet is being applied fails to give keywords their own color.
2. I can't find any official list of supported languages. (This and this seem to work.)
3. array shows up as a built-in in C++ code. (It isn't.)
4. The issue I mentioned about C versus C++ no longer exists, because Highlight.js doesn't support C as a separate language. (That's surprising, but I can live with it.)

3 and 4 are issues in Highlight.js itself, but I believe 1 and 2 are within Rocket.chat and its docs.

[xenithorb]

I just want to be able to have "text" highlighting, In any other highlighter this would be synonymous with "Disable highlighting, but still have preformatted text blocks".

Generally I would expect

:::text
:::txt
```text
```txt 

But those don't do anything. Note how on github, it doesn't get confused by the use of triple backticks inside triple backticks, either.

[dannysauer]

Lack of message formatting documentation is referenced in RocketChat/docs#971

[brahmaparush]

Did you specify the language after the ```?

We currently use https://github.com/stubailo/meteor-highlight.js/tree/master

But we can add support to https://github.com/codemirror/codemirror if you think it is more powerful?

How to specify the language after the ```?

[Rohlik]

@brahmaparush Something like that:

```js
or
```java

[Franziskus1988]

@Rohlik

==>>

I think it doesn't work as desired...

[MacGyver27]

@Franziskus1988 haha definitely.. came here to report this problem..

have an example from the webex teams chat.. we use it internally and its markdown is almost perfect..
```{language} it accepts syntaxes like: js, ts, java, py, bash, regex, html, css, scss, scala, c,...

please fix.. also what about giphy and similar?? no memes no fun ;)

[engelgabriel]

We are not going to use the Codemirror for this because it is a full-blown text editor, and it would be heavy, and not something that can be used in the React Native apps.

We want to keep it fast and consistent between platforms.

_Please notice that js is not a valid syntax definition, you should use javascript. The full list can be found at https://highlightjs.org/static/demo/ and we are currently using the Github color style._

[octoxan]

This doesn't seem to work?

Tried both capital and lowercase HTML

[feitosa-daniel]

@octoxan I think it works. It seems that the default format is HTML,XML (don't include the language).

However, the bold formatting of code blocks damages the Github style. Some languages (e.g., Python) use bold font for keywords. I adjusted that by adding the following snippet to Administration > Layouts > Custom CSS:

.rc-old code {
    font-weight: normal;
}