We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.

Super pleased with my customizations to Zettlr

edited February 28 in Customisation

I've been using markdown and plain text for note taking and writing for several years. I've tried different editors, including Sublime Text and VS Code. Zettlr is by far the simplest, most elegant, and easiest to customize of any editor I've used. The table editor is awesome.

I want to thank the developer and the community for making such a great tool.

Lately, I've been splitting my time between Zettlr and VS Code, mostly editing in Zettlr and exporting from VS Code. I finally took the plunge to move my Pandoc command line options to Zettlr's Advanced Preferences. That combined with some minor tweaks to the Custom CSS and I'm now in heaven.

I thought I'd share a bit about my set up.

My tweaks to the editor look like this:

Here is what I have in the Custom CSS

:root {
  --c-primary: #0077C8;
}

#editor * {
    font-family: 'JetBrains Mono', 'Inconsolata Regular', monospace;
    font-size:1.0em;
}

#editor .cm-header-1,
#editor .cm-header-2,
#editor .cm-header-3,
#editor .cm-header-4,
#editor .cm-header-5,
#editor .cm-header-6,
#editor .cm-formatting-header{
  color: var(--c-primary);
  font-family: 'Overpass Nerd Font', 'JetBrains Mono', 'Inconsolata Regular', sans-serif;
  font-weight:600;
  font-size:1.25em;
}

.CodeMirror-line:not(:last-child)::after {
  content: "¶";
  color: #DDD;
  font-weight:200;
}

#editor .CodeMirror-code .mute {
    opacity: .6;
}

Ooops, I hit enter too quickly.

Here is my tweaked HTML5 template

The Pandoc command line options I use are:

pandoc "$infile$" -f markdown+smart+definition_lists+yaml_metadata_block+strikeout+bracketed_spans+fenced_divs -t html5 --template ~/.pandoc/templates/html5/github/GitHub.html5 --toc --toc-depth 3 -F mermaid-filter -s -o "$outfile$"

And the output looks like this:

Cheers!
–mj

Tagged:

Comments

  • edited February 28

    .

  • I like the unicorn! And that you've made use of that accidental finding of pilcrow displaying! But do the keywords in the YAML frontmatter work? Because I always thought you need to simply provide an array, not a string with literal hashtags?

  • The hashtags in YAML work mostly, but not completely. Zettlr doesn't parse them to be clickable. Searching for #foo works to find all the files with that tag, whether the tags are inside YAML or not.

    In YAML, # indicates a comment; if the hashtag is inside of quotes, then it is treated as part of a string & doesn't cause problems for Pandoc.

  • edited February 28

    The other option is to use the mmd_title_block extension, which does work completely with Zettlr.

    The Pandoc user guide warns:

    See the MultiMarkdown documentation for details. If pandoc_title_block or yaml_metadata_block is enabled, it will take precedence over mmd_title_block.

  • What do you use to end your YAML Block? When I type ... as in your header, it leaves the formatting below the YAML block in quote mode, or some other underlying mode I haven't figured out.

    This would be very helpful for me to learn.

    Thank you,
    --SDev

  • When I type ... as in your header

    This is because AutoCorrect transforms three dots into an ellipse, try holding shift while pressing space or return!

  • Thank you, ...[Shift-Return] works. I hadn't thought of that.

    --SDev

  • Perfect! :)

  • I'm using your custom CSS, and it will be untouched until I know at least a little bit of CSS (that is, maybe forever!)

    Meanwhile, I'm absolutely loving it. It's super clear and pleasant to the eye, it helps a lot to keep writing with it.

    Thank you for sharing it!

  • @mj_designthinks said:
    The Pandoc command line options I use are:

    pandoc "$infile$" -f markdown+smart+definition_lists+yaml_metadata_block+strikeout+bracketed_spans+fenced_divs -t html5 --template ~/.pandoc/templates/html5/github/GitHub.html5 --toc --toc-depth 3 -F mermaid-filter -s -o "$outfile$"
    

    And the output looks like this:

    Cheers!
    –mj

    Thanks for sharing. I tried using this but couldn't get the "wiki look" with the TOC on the left sidebar to work. Was this a custom edit in GitHut.html5?

Sign In or Register to comment.