Syntax highlighting of code examples

Hello SonarCloud users!

We are pleased to announce one more feature to help you get to Clean Code faster.

Following the addition of ‘diff’ highlighting, we are adding syntax highlighting to noncompliant and compliant code examples. This should make it easier to see what updates are needed:

As ever, any feedback and questions are most welcome.

3 Likes

Hi John,

I just noticed that after upgrading to version 10.2. That is great!

I develop my own plugin and I’d like to be able to sometimes bypass language auto-detection.
I tried to add something like that in my HTML rule description file but it does not work:

<pre><code class="language-txt">...

Any idea?

Thank you

Regards

Nicolas

1 Like

Hi Nicolas,

Thank you for your feedback. Could you say a little bit more about what you would like to do, please? Are you trying to turn off the syntax highlighting completely or specify the particular language(s) that the code example is written in? What sort of results are you getting today?

We have been discussing adding the ability to specify the language of a code example, but haven’t got a plan for when this might be delivered at the moment.

Best regards

John

Hi John,

For instance, for the following piece of code, I’d like no highlighting (or plaintext highlighting) according to the framework you’re using for highlighting:

Thank you

Regards

Nicolas

1 Like

Thank you for coming back so quickly. I’ll talk to the team and see if anything is possible today.

Kind regards

John

Hi @Nicolas_Alcaraz ,

It looks like php:S6600 needs to do something similar:

It does it by putting backticks around each individual word:

To be noted that some construct such as `isset()`, `exit()` or `array()` does require them.
Here is the list of constructs for which parentheses could be used but should be avoided :
`return`, `echo`, `break`, `clone`, `case`, `continue`, `include`, `include_once`, `require`, `require_once`, `print`, `return`, `throw`, `yield`, `yield from`

Preview view: https://github.com/SonarSource/rspec/blob/master/rules/S6600/php/rule.adoc
Raw view: https://raw.githubusercontent.com/SonarSource/rspec/master/rules/S6600/php/rule.adoc

I hope that helps.

Best regards

John

Hi John,

It looks like this “adoc” stuff is SonarSource specific.
My rule description is stored as an HTML file. Thus, backtick syntax is not supported.
That also links to my other question: 'Diff' highlighting for code examples and Clean Code Principles - #4 by Nicolas_Alcaraz

Thank you

Regards

Nicolas

Hi Nicolas,

Apologies, I think the equivalent in HTML is wrapping each word like this:

<code> word </code>

This is the rule I mentioned above in HTML format: https://github.com/SonarSource/sonar-php/blob/master/php-checks/src/main/resources/org/sonar/l10n/php/rules/php/S6600.html

Regards

John

Hi John,

It is what I’m doing:

image

But whatever the class I pass to code, the keyword inside gets colorized.

Regards

Nicolas

Hi,

Looking at sonar-java I found this rule for example: https://github.com/SonarSource/sonar-java/blob/912ab49deb09376a9aecb97aa65b1121e3fb25be/java-checks/src/main/resources/org/sonar/l10n/java/rules/java/S1210.html

This uses <code> text </code> without any additional ‘class’ parameters in <code> and produces the effect I think you are looking for:

https://next.sonarqube.com/sonarqube/coding_rules?q=s1210&open=java%3AS1210

Regards

John

Hi John,

Thanks for the follow-up.

There must be some kind of rule description html processing on your side before generating the plugin because I don’t get the same output on my side with the same piece of html:

image

On your side:

image

Could you please ask somebody from your dev team about it?

Thanks a lot

Regards

Nicolas

Hi,

They’re using the highlight.js library to render the code on the issue details. It’s used here in the SonarQube source code.

So, unless your language is supported by highlight.js, there’s no other way to highlight the code samples.

2 Likes