Ubuntu – make ReText use a different font type for displaying code

configurationfontsqt

I'm using ReText 3.1.4 (Lubuntu 12.10) to make notes for myself. I want to know if it's possible to use a different font for displaying text that is marked as code in preview mode:

ReText preview

In the image, Sort and ~/.config/pcmanfm/lubuntu/desktop-items-0.conf appear faded. I feel that's an issue with Courier (not just in ReText). I would like to use Ubuntu Mono or DejaVu Sans Mono instead of Courier. Is that possible? How?

I installed all the recommended software suggested at the time of installing Retext from the Lubuntu Software Center and that included Qt Configuration 4.8.3 which allows a lot of customization. I can use the Fonts tab of this application to change the default font but not that of the font responsible for text in depicting code:

ReText preview with different default font

Best Answer

We can use Cascading Style Sheets (CSS) to achieve this.

If you are new to CSS and want some help/tutorial, see this Stack Overflow question:

Also refer to the ReText Wiki for Configuration File:

Follow these steps to create and modify the CSS File:

  1. ReText stores its configuration files at ~/.config/ReText project/ReText.conf. Open your File Manager (Nautilus if you are using Ubuntu). Press Ctrl + H to show all the hidden files. Now, navigate to the directory .config → ReText project. Here you would find ReText.conf. We would need to edit it to point to our css file. But let's first create the css file.

  2. In this same directory create a file called myconfig.css (you can name it whatever you want). Now open it in a Text Editor.

  3. Edit the file as below:

    code {
    font-family: Ubuntu Mono, DejaVu Sans Mono;
    background-color: #D3D3D3;
}

pre {
    background-color: #D3D3D3;
}

    Obviously, what you want is to only set the font-family property to code tag. However, I recommend to set background-color property as well to both code and pre tags. I have set the background-color to LightGrey (its Hex Value is #D3D3D3). You may modify the color to your tastes and preferences. The following link should help you in this regard.

  4. Now modify ReText's Configuration file to point it to the newly created stylesheet. Open ~/.config/ReText project/ReText.conf in your Text Editor and add the styleSheet setting at the end and point it to its location. For me it is:

    styleSheet=/home/aditya/.config/ReText project/myconfig.css

    ReText Conf File

    Note:

    • Ensure that you provide the full path to the file. It cannot expand ~ as your $HOME.
    • Furthermore, if you named your css file as something other than myconfig.css or placed it in some other directory, ensure that you provide the correct file name and path.

  5. If you already had ReText running, close and restart it again for changes to take effect.

mission accomplished

How to know what HTML <tag> to modify

If you are unsure about the tag names, you can view the HTML code of your markdown and then make your preferred changes to CSS.

Edit Menu → View HTML code would show the markup of your markdown text.

know the tags

Related Question