Editor font & codeblock font cutomization for HackMD

README.md

UI Cutomization for HackMD with Stylus

Install

Make sure you've had Stylus browser extension installed:

• Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
• Firefox: https://addons.mozilla.org/firefox/addon/styl-us/

THen click the following link:

https://gist.github.com/Yukaii/946aeee91febde6aecb95a900b315d91/raw/hackmd-font-customize.user.css

Screenshots

• Editor font: iA Writer Duospace
• CodeBlock font: JetBrains Mono

hackmd-font-customize.user.css

/* ==UserStyle==
@name         HackMD Style customization
@description  Style cutomization on HackMD
@namespace    userstyles.yukaii.tw
@version      0.3.0
@author       Yukai Huang <hi@yukai.dev> (https://github.com/Yukaii)
@preprocessor stylus

@var          text     editorFont    "Editor Font" Source Code Pro
@var          text     codeBlockFont "Codeblock Font"  Menlo, Monaco, Consolas, "Courier New", monospace
@var          checkbox zenMode       "Toggle Zen mode" 0
@var          checkbox lineNumber    "Toggle Line number" 1
@var          checkbox focusCurrentLine "Focus line mode" 0
@var          checkbox monochromeText "Monochrome text color" 0
==/UserStyle== */
@-moz-document domain("hackmd.io") {
    html[lang] .CodeMirror {
        font-family: editorFont;
        letter-spacing: 0;
    }

    .markdown-body code.hljs {
        font-family: codeBlockFont;
    }

    if zenMode==1 {
        .ui-edit-area {
            margin: 0 auto;
            width: 80vw;
            max-width: 680px;
        }

        .CodeMirror-lines {
            padding-top: 10px;
        }

        .CodeMirror-gutter.authorship-gutters {
            display: none;
        }

        .authorship-gutter {
            display: none;
        }
    }

    if lineNumber==0 {
        .CodeMirror-gutter.CodeMirror-linenumbers {
            display: none;
        }

        .CodeMirror-linenumber {
            display: none;
        }
    }

    if focusCurrentLine==1 {
        .CodeMirror-code > div:not(.CodeMirror-activeline) > .CodeMirror-line {
          opacity: 0.8 !important;
          filter: saturate(0.5) !important;
        }
    }
    
    if monochromeText == 1 {
        .CodeMirror-line {
            filter: saturate(0) !important;
        }
    }
}