Skip to content

GitHub Custom Editor Font by flerouwu

Details

Authorflerouwu

LicenseNo License

Categorygithub.com

Created

Updated

Size918 B

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Changes the code editor font on GitHub to a custom font. It replaces the default ui-monospace font family in various locations.

Notes

You need to edit the style CSS to set your own font. An example is provided in the CSS. Make sure to have the font installed on your system as well.

If you need support, open an issue on https://github.com/flerouwu/flerouwu/issues.

Source code

/* ==UserStyle==
@name         GitHub Custom Font (Edit Style for Config)
@version      20231221.22.35
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://github.com/") {
:root {
    /* !!!! IMPORTANT !!!! */
    /* Set your font here! */
    --code-font: "YOUR-CUSTOM-FONT-HERE";

    /* For example, here's mine: */
    /* --code-font: "0xProto"; */
}

/**
 * - `pre` and `code` are commonly used when rendering Markdown code blocks.
 * - `.react-code-text` is used when directly viewing a file.
 * - `.react-blob-print-hide` is hidden text that doesn't have styling when 
            viewing a file. It's what the user selects, but is set to transparent
            so that the syntax highlighting element shows through.
 * - `.blob-code-inner` is used in search results.
 */
pre,
code,
.react-code-text,
.react-blob-print-hide,
.blob-code-inner {
    font-family: var(--code-font) !important;
}
}

Reviews

No reviews yet.