How can I highlight my Python code?

[ya332]

I know that the following snippet highlights markdown in our book:

  marked.setOptions({
    renderer,
    breaks: true,
    highlight(code, lang) {
      if (!lang) {
        return hljs.highlightAuto(code).value;
      }

      return hljs.highlight(lang, code).value;
    },
  });

  return marked(he.decode(content));

However, when I write a markdown snippet with Python code in it, it doesn't get highlighted:

Below is the markdown that I am trying to highlight. I checked highlight.js doc and it told me to pass

 tags.

<pre><code class="hljs python">
class Solution:

    """
    1. Two Sum (Easy)
    Given an array of integers, return indices of the two numbers such that
    they add up to a specific target. You may assume that each input would have
    exactly one solution, and you may not use the same element twice.

    Example:
    Given nums = [2, 7, 11, 15], target = 9,
    Because nums[0] + nums[1] = 2 + 7 = 9,
    return [0, 1]."""

    def twoSum(self, nums: List[int], target: int) -> List[int]:
        seen = {}
        for i, x in enumerate(nums):
            if target - x in seen: return [seen[target-x], i]
            seen[x] = i
</code></pre>
The actual output:

The expected output:

Notice how the actual output is all black and white but the expected output has correct Python code highlighted.
How can I highlight my Python code?
Best.
            

[klyburke]

@ya332 Thanks for the question.

We haven't tried highlighting Python, but I can try to help. Could you please share the documentation where you found the solution to write <pre><code class="hljs python"> ... </code></pre> ?

[ya332]

Hello @klyburke, I found it here https://github.com/highlightjs/highlight.js/issues/1224. I also tried highlightAll and highlightAuto from https://highlightjs.readthedocs.io/en/latest/api.html#core-api, but they don't highlight for some reason.

[klyburke]

@ya332 Thanks for sharing.

From what I read, highlight.js supports python in its core library, so you do not need to pass any tags. See the "Supported Languages" section here: https://highlightjs.org/usage/

I tested your code snippet in the demo book, and I see proper highlighting when I wrap the code with triple backticks (``) instead of

`


When I write with triple backticks like this:

The code is highlighted:


When I write with <pre><code> like this:

The code is not highlighted:


So try using triple backticks and let me know if that works for you.
Note that I was running the main builderbook/builderbook app to test.
            

[ya332]

Thanks @klyburke. this fixed my issue. Closing.