Page 1 of 1
How to set different highlighting colours for common syntax type according to coding language
Posted: Thu Jan 25, 2024 5:45 pm
by Olivier
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
Re: How to set different highlighting colours for common syntax type according to coding language
Posted: Fri Jan 26, 2024 7:48 am
by Radu
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