Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Code syntax highlighting in devlog posts

A topic by RhythmLynx created Nov 24, 2022 Views: 595 Replies: 5
Viewing posts 1 to 6

Hello, I'd like to be able to write code snippets in devlog posts on a project page and have language syntax highlighting to improve legibility. [This post](https://itch.io/t/2131750/syntax-highlighting-in-forum-posts) says that this functionality has been added to forum posts: 

You can activate syntax highlighting by having a pre tag with the class language-XXX on it (where XXX is the language you wish to highlight for. For markdown we support using the ```language syntax that is available on other platforms like GitHub.

Is there a way to apply this syntax highlighting to devlog posts? I've tried several things, I will try them here as well to see if they work in the forum posts.


#1: Backtick language (my preferred syntax as it matches GitHub markdown)

```lua
print("hello world")
```

```lua
print("hello world")
```

#2: Code HTML tag

<code class="language-lua">
print("hello world")
</code>

<code class="language-lua">
print("hello world")
</code>


#3 Pre HTML tag

<pre class="language-lua">
print("hello world")
</pre>

<pre class="language-lua">
print("hello world")
</pre>


#4 Code and pre HTML tags

This is the example given on the Prism syntax highlighting library website.

<pre><code class="language-lua">
print("hello world")
</code></pre>

<pre><code class="language-lua">
print("hello world")
</code></pre>

When having both pre and code tags, I've tried adding the CSS class to just the code tag, just the pre tag, or both.

OK yeah I can't get this to work in the forum either. The announcement post says

For those using the rich text editor, you will have to manually edit the HTML to add the class at the time being.

But I can't see how to edit the HTML of a forum post or devlog post, only the game page itself.

Just as an addendum, maybe this will be fixed by the true syntax highlighting anyway but there are a couple of other things that make reading code in devlogs quite difficult. One is that tab indentation is rendered as a massive 8 characters wide instead of the fairly standard 4. The other is that the text wraps instead of horizontally scrolls, and it seems to treat punctuation immediately adjacent to letters as being part of the same word, meaning it wraps even more early and often than strictly necessary.

As an example here is a code snippet from a devlog post on a forum running on the Discourse platform:


And here is that same snippet when crossposted to an itch devlog on a stylised game page, quite a bit harder to read:


Syntax highlighting, smaller tab sizes and horizontal scrolling would all help a lot. As would being able to make use of the full width of the page.

Thank you for all the hard work on this lovely site!

(1 edit)

Oh! When you're first creating a new devlog post there is an HTML edit option:


But when editing an existing devlog (include drafts) the option disappears:


However, even adding all the pre and code tags listed above in HTML edit mode, upon saving it still just shows as regular monospaced text without syntax highlighting. So it seems this just isn't supported atm.

Admin

At the moment syntax highlighting is only a available in the forums here not on the blog posts. Because project pages can use a wide range of theme colors, we don’t have a general purpose way to set up colors on for syntax highlighting on those pages yet.

Ah OK, thanks for the response, I look forward to that feature in the future

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.