How to set different highlighting colours for common syntax type according to coding language

Olivier · Post by **Olivier** » Thu Jan 25, 2024 5:45 pm

Hi,

How can I set different colours for the same highlighter type (eg “keywords”) according to each different coding language via css and share these setting with other team members on the remote server/in the project

Thanks in advance and best regards,
Olivier

Post by **Radu** » Fri Jan 26, 2024 7:48 am

Hi Olivier,
Let's try to build a small example, a DITA topic with a codeblock of type "Java" which has a keyword inside it:

Code: Select all

<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
<topic id="introduction">
    <title>Introduction</title>
    <body>
        <p>
            <codeblock outputclass="language-java">import abc;</codeblock>
        </p>
    </body>
</topic>

We publish this to WebHelp and look at the generated HTML content for the topic, it looks like this:

Code: Select all

<pre class="+ topic/pre pr-d/codeblock pre codeblock language-java" id="introduction__codeblock_akf_vxm_f1c" data-ofbid="introduction__codeblock_akf_vxm_f1c"><strong class="hl-keyword">import</strong> abc;</pre>

So the DITA codeblock became an HTML <pre> element with a @class attribute value which contains 'language-java' and which contains inside it the <strong class="hl-keyword">.
Then with a CSS selector in your CSS customization layer you could do something like:

Code: Select all

pre.language-java .hl-keyword {
  color: red;
}

So in general you can use the web browser inspector tools to look at the generated HTML output structure and build CSS selectors to change it in various ways.

Regards,
Radu

How to set different highlighting colours for common syntax type according to coding language

How to set different highlighting colours for common syntax type according to coding language

Re: How to set different highlighting colours for common syntax type according to coding language