My understanding is that single backticks are supposed to be for inline code while triple backticks are for block code. But they are rendered in different color codings. Is there a reason?
Also, is <pre> used for anything other than code blocks (since the formatting of ``` is done using the styling for <pre>)
If you install the core internals plugin you get additional previews in the editor including the ability to see the html the rendering that occurs. This may be a way for you to research this yourself. A lot if html is also valid in tiddlers and CSS, well it cascades so you can use it as you wish in many cases.
Single and tripple backticks are wikitext and you can customize the css in use or do your own thing. I have being meaning to get rid of the red myself.
Single tick code like: if (something) is rendered as <code>if (something)</code>
Tripple tick code block is rendered as <pre><code>if (something)</code></pre>
Thatās the main difference. In the palette settings of the ControlPanel : Appearance : Palette tab ā¦ the setting of the CODE element can be changed. The parameter is: Code foreground
1 Like
I didnāt have a very short look at the js-code files. It seems itās only used by code-block and somewhere in the railroad plugin.
In templates and the UI itās used more often. But didnāt look at the details
Adding to others replies I just created this small stylesheet that customises the styles for the code tag and overrides that defined in the ## $:/themes/tiddlywiki/vanilla/base
pallet.
code-style.json (413 Bytes)
Rather than use the above you can go to Control Panel > Appearance > Palette > Show editor
- Code background
- Code border
- Code foreground *
Thank you. I have been styling code, but saw that the theme styled āpre > codeā and so wanted to know if there is a reason for that (and not style code without pre). And also wasnāt sure why the end result of single and triple backticks look so different
And I think I found the reason for the use of <pre> in a comment:
Markdown likes putting code elements inside pre elements
What bothered me, BTW is that the pre > code styling is set to inherit the colors of the <pre> element which is why I wondered if itās supposed to be used independently as well
Thatās the thing, there is styling for āpre > codeā and āpreā that doesnāt make the result look like an independent ācodeā tag. In particular there is pre-background and pre-border that are different colours than code-border and code-background and code-foreground is not used.
As far as I know most systems that convert plain text into HTML use this mechanism.
PRE is defined as written at: <pre>: The Preformatted Text element - HTML: HyperText Markup Language | MDN
CODE is defined like that: <code>: The Inline Code element - HTML: HyperText Markup Language | MDN
Itās mainly defined using CSS definitions from the themes/tiddlywik/vanilla/base.tid ā¦ Thatās the way it is at the moment. ā¦
If you think, there is something wrong with the CSS definitions you may create an issue at GitHub. ā¦ BUT it will be hard to drastically change the mechanism, because backwards compatibility is a very strong requirement in TW.
So if you need different defaults, you probably need to create a new theme, so it can be switched by users in a backwards compatible way.
Iām saying that ` converts to <code> while ``` converts to <pre><code> and also has styling for pre > code that overwrites styling for code.
And yes, I created a theme to unify, but was wondering if there was a reason for the inconsistency. I think it is because ` is handled by TW itself, while ``` is done by code mirror.
The single backtick, is the inline form and the triple backtick is the block form on tiddlywiki.
To make it a block it uses the <pre>
Remember you can just use the html tags if you want instead of these wikitext symbols.
A side note:
The issue about the āredā color when using single ticks came up recently. Creating a stylesheet tiddler tagged $:/tags/Stylesheet as follows overrides this. (Source $:/themes/tiddlywiki/vanilla/base)
code {
color: #4d0000; /* <<colour code-foreground>> */
background-color: <<colour code-background>>; /* <<colour code-background>> */
border: 1px solid <<colour code-border>>; /* <<colour code-border>> */
}
- I only changed the color but kept the others for optional configuration
code-color.json (471 Bytes)
Most wiki systems work that way. So we used it too.
Who defines, that this is inconsistent. It seems to be the status quo. If you download empty.html there is no codemirror or any other plugin.
tiddlywiki prerelease includes the highlight.js plugin, which can be used to highlight code examples and it includes codemirror to be able to test it in edit mode.
The prerelease contains many plugins, so we do get early feedback if something has changed.