• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Code formatting and syntax highlighting?

Community Beginner ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

From what I can tell, Robohelp (in any version) does not have inbuilt code formatting.

I'll be using the Robohelp 2019 version and am looking for help on how to integrate some syntax highlighter and some code formatting. Any help?

TOPICS
New UI

Views

1.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Dec 15, 2018 Dec 15, 2018

I guess you are not talking about the source code editor of RoboHelp 2019, which has pretty printing and syntax highlighting, right?

So, if you want to get syntax highlighting in your published output, you can simply use one of the many syntax highlighters available, e.g. highlight.js

Most highlighters work in the same way. Just add the link to the highlighter in the head section of your help file or master page. Here is an example for hightlight.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css

...

Votes

Translate

Translate
Adobe Employee ,
Dec 15, 2018 Dec 15, 2018

Copy link to clipboard

Copied

I guess you are not talking about the source code editor of RoboHelp 2019, which has pretty printing and syntax highlighting, right?

So, if you want to get syntax highlighting in your published output, you can simply use one of the many syntax highlighters available, e.g. highlight.js

Most highlighters work in the same way. Just add the link to the highlighter in the head section of your help file or master page. Here is an example for hightlight.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>

<script>

  //<![CDATA[

  hljs.initHighlightingOnLoad();

  //]]>

</script>

Alternatively, you can download the syntax highlighter of your choice, place it in the assets/js folder and link it like this:

<link rel="stylesheet" href="assets/js/highlight/styles/dark.css" />

<script src="assets/js/highlight/highlight.pack.js"></script>

<script>

//<![CDATA[

hljs.initHighlightingOnLoad();

//]]>

</script>

Then add your code in the body and wrap it into the tags with attributes that the highlighter requires. E.g. for highlight.js like this:

<pre><code class="html">(your code)</code></pre>

You can change the class attribute value to one of many languages like XML, CSS, JSON, C++, C#, etc. for your code samples. See the documentation of the highlighter of your choice.

Note, that you will not see the highlighting in the RoboHelp editor, as RoboHelp will block the execution of JavaScripts for security reasons. But it will work fine in the published output.

The result can (in this example with a dark "theme") look like this:

Let us know if it works for you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 17, 2018 Dec 17, 2018

Copy link to clipboard

Copied

Thank you, Stefan! These examples are what I was after.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 17, 2018 Dec 17, 2018

Copy link to clipboard

Copied

LATEST

Great! Glad we could help 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp