Reading · BurgeonLab: Full-text

Fixed a syntax highlighting bug in ReText with guidance from genAI. Learned Git basics, made a pull request, and got merged.

This post was last updated 1 year ago. The core ideas should still be useful, but tech moves fast; always check the latest docs for current best practices before applying what is mentioned.

Fixing My First Bug

@Minty95, one of my Mastodon followers, has brought to my attention a problem he’s had with ReText’s syntax highlighting of fenced code blocks. I tried it on my Mac and sure enough, the bug was present. So as a challenge, I tried fixing it. I’m happy to say I managed to troubleshoot the issue, albeit with some guidance from genAI (Gemini-2.0-Flash and Perplexity.AI). This is the first time I fixed some app code! 🥳

I had to learn how to do a pull request (PR) and some more Git basics (like new branches and setting upstream), but it went smoothly. ReText’s creator Dmitry gave me clear comments for the code review and then the changes were merged! (Thanks Dmitry for making ReText available for all!)

A new release has not been announced, so here are the changes I made (more for my own reference).

Issue

Backticks and language of fenced code blocks not highlighted properly:

Screenshot of ReText Markdown editor not highlighting backticks correctly.

After fix:

Screenshot of ReText Markdown editor highlighting backticks correctly.

Fix

We need to make changes to three files: the config file, editor.py, and highlighter.py.

Config

Add these two parameters under Color Scheme in the ReText configuration file. Choose your own colours! (I have a previous post that covers ReText customization.)

1[ColorScheme]
2codeBlock=orange
3codeSpans=yellowgreen

Editor.py

Add a new line to define the colours of the newly created codeBlock:

1`codeBlock`: {'light': '#aa6600', 'dark': '#fe5f01'}

Here’s a truncated snippet:

1colors = {
2    # Editor
3    'marginLine':           {'light': '#dcd2dc', 'dark': '#3daee9'},
4    'currentLineHighlight': {'light': '#ffffc8', 'dark': '#31363b'},
5    # Highlighter
6    'htmlComments':         {'light': '#a0a0a4', 'dark': '#b0b0aa'},
7    'codeSpans':            {'light': '#505050', 'dark': '#afafaf'},
8    'codeBlock':            {'light': '#aa6600', 'dark': '#fe5f01'}, # Add this line

Highlighter.py

Add two lines around line 25, below from ReText.editor import getColor:

1reFencedCodeStart = re.compile(r'^(`{3,})(\w+)?\s*$')
2reFencedCodeEnd = re.compile(r'^`{3,}\s*$')

Secondly, add this new block after def highlightBlock(self, text): around line 157:

 1    def highlightBlock(self, text):
 2        # If inside fenced code block (not the fence line)
 3        if self.docType == 'Markdown' and self.previousBlockState() == 1:
 4            fmt = QTextCharFormat()
 5            fmt.setFontItalic(True)
 6
 7            # Check if this line closes fenced block
 8            if reFencedCodeEnd.match(text):
 9                # Fence closes: highlight fence line in yellowgreen (codeSpans)
10                fmt.setForeground(getColor('codeSpans'))  # fence color yellowgreen
11                self.setFormat(0, len(text), fmt)
12                self.setCurrentBlockState(0)
13            else:
14                # Inside fenced code: highlight in orange (codeBlock)
15                fmt.setForeground(getColor('codeBlock'))  # code block content color orange
16                self.setFormat(0, len(text), fmt)
17                self.setCurrentBlockState(1)
18            return
19
20        # If this line is a fence opening line (3+ backticks with optional lang)
21        if self.docType == 'Markdown' and reFencedCodeStart.match(text):
22            fmt = QTextCharFormat()
23            fmt.setForeground(getColor('codeSpans'))  # fence color yellowgreen
24            fmt.setFontItalic(True)
25            self.setFormat(0, len(text), fmt)
26            self.setCurrentBlockState(1)
27            return
28
29        # Otherwise, normal highlighting for text outside fenced blocks
30        self.setCurrentBlockState(0)