# Syntax Highlighting inside Shortcode

**URL:** <https://discourse.gohugo.io/t/syntax-highlighting-inside-shortcode/49619>\
**Category:** support\
**Tags:** highlight, shortcodes\
**Created:** [May 3, 2024, 6:52pm UTC](https://discourse.gohugo.io/t/syntax-highlighting-inside-shortcode/49619 "2024-05-03T18:52:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedevjournal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/thedevjournal/32/21979_2.png) [@thedevjournal](https://discourse.gohugo.io/u/thedevjournal)\
**Post date:** [May 3, 2024, 6:52pm UTC](https://discourse.gohugo.io/t/syntax-highlighting-inside-shortcode/49619/1 "2024-05-03T18:52:35Z")

</div>

I am using the theme [Poison](https://themes.gohugo.io/themes/poison/#tabs) and I particularly liked their addition of tabs as shortcodes.

However, it seems that shortcut setup in this theme does not support Syntax Highlighting.

The shortcode syntax in this theme is this - [poison/layouts/shortcodes/tab.html at 4b36ef57e6834471d946d634f9677971b5acc43e · lukeorth/poison · GitHub](https://github.com/lukeorth/poison/blob/4b36ef57e6834471d946d634f9677971b5acc43e/layouts/shortcodes/tab.html#L2C5-L2C15)

I put the following code in my page, and while the tabs work, the syntax highlighting is not working.

```auto
{{< tabs tabTotal="2" >}}

{{% tab tabName="First Tab" %}}
### h3. This is markdown content - h3.
#### h4. This is markdown content - h4
{{% /tab %}}

{{< tab tabName="Second Tab" >}}
{{< highlight text >}}
private static void main() {
}
{{< /highlight >}}
{{< /tab >}}

{{< /tabs >}}

```

Just to make sure that Syntax Highlighting is working for my page, I also added the following code just after the tabs and the syntax highlighting is working with codefences.

````auto
    ```java
    private static void main(){
    }
    ```

````

Attached are the screenshots -

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/1/b/1bcd92b2c9f6fd960c54dc962771eea479bd3b62.png)

> Can somebody suggest how can I make this work?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 3, 2024, 7:01pm UTC](https://discourse.gohugo.io/t/syntax-highlighting-inside-shortcode/49619/2 "2024-05-03T19:01:03Z")

</div>

Without digging into the details, why not use fenced code blocks:

````auto
{{% tab tabName="Second Tab" %}}
```text
private static void main() {
}
```
{{% /tab %}}

````

---

<div class="post-metadata">

**Author:** ![thedevjournal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/thedevjournal/32/21979_2.png) [@thedevjournal](https://discourse.gohugo.io/u/thedevjournal)\
**Post date:** [May 3, 2024, 7:15pm UTC](https://discourse.gohugo.io/t/syntax-highlighting-inside-shortcode/49619/3 "2024-05-03T19:15:56Z")

</div>

Oh yes, did not try this version, but it works perfectly. Here is the working version of the code.

````auto
    {{< tabs tabTotal="2" >}}

    {{% tab tabName="First Tab" %}}
    ### h3. This is markdown content - h3.
    #### h4. This is markdown content - h4
    {{% /tab %}}

    {{% tab tabName="Second Tab" %}}
    ```java
    private static void main() {
    }
    ```
    {{% /tab %}}

    {{< /tabs >}}

````

Here is the screenshot -

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/a/f/af5ed04b79f3b17b4b63191f643c0e4e43fe914a.png)

Thank you so much @jmooring

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [May 5, 2024, 7:16pm UTC](https://discourse.gohugo.io/t/syntax-highlighting-inside-shortcode/49619/4 "2024-05-05T19:16:30Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.