Trilium: Suggestion: Code Block Formatting

Created on 25 Jan 2019  路  7Comments  路  Source: zadam/trilium

When you use code blocks right now they are wrapped in paragraphs, causing a rather untidy look. The following CSS makes it appear as if they were not wrapped in paragraphs:

.ck-content code {
    background-color: #785d8e3d;
    padding: 0.4rem 0.1em;
    border-radius: 0px;
    margin-top: -0.3rem;
    font-size: 95%;
    line-height: 110%;
    white-space: pre;
    white-space: pre-wrap;
    display: -webkit-box;
}

Example:

Example picture of modified Code Block

Pros:

  • Looks much tidier
  • Long Code Blocks are much easier to read

Cons:

  • Inlining code examples cause a break to new line from box display. (I just use italics instead as shown in picture above)

Most helpful comment

Code block support is in 0.38.0-beta

All 7 comments

This looks nice and I totally understand the need to do this but ... <code> is an inline element and this kind of converts it to a block element. This would cause problems once we have proper code block functionality ...

I see your point.
Unfortunately, because the only way to apply margins that fix the code blocks look was to make it a block element, when one tries to highlight code in the middle of a sentence and apply code, it breaks the sentence into multiple lines. So, while it does look good in blocks, of course the issue is that you can not write code inline without destroying formatting. The easiest solution would be to make two code buttons on the highlight toolbar. One for inline code examples, one for large blocks. The large blocks would have a class that applied the css above, the inline one would have the code formatting already in the app.

Should be in the next ckeditor release.
https://github.com/ckeditor/ckeditor5/issues/436

Hi,
I'm considering switching from Zim to Trilium and this feature is a must have for me. Since the ckeditor5 issue referenced in the previous comment has been closed and the feature added to CKeditor, are there any news about it?
Thanks!

Hi, issue is closed but they did not release a stable version with it yet. Once it's released you can expect Trilium with code blocks pretty soon.

Thanks for your quick reply!

Code block support is in 0.38.0-beta

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zadam picture zadam  路  5Comments

munavirch picture munavirch  路  5Comments

gerroon picture gerroon  路  6Comments

tvortsa picture tvortsa  路  3Comments

zadam picture zadam  路  4Comments