Hi
How do i amend the code block formatting so that the block matches the length of the text and doesn’t change length to fit the tiddler?
Thanks
Hi @ouroboruss and welcome!
Could you post an image where you point out what is wrong and how you would like it to appear?
And are you referring to a code block directly in the text of the tiddler or is it inside something else like a “div” or some widget?
Hi twMat!
Thanks for the quick response
The highlighted box is filling the tiddler and I would like it to resize with the length of the text.
Try this:
Create a tiddler (e.g., “MyStyles”) tagged with $:/tags/Stylesheet, containing:
pre { display:inline-block; }
This will cause code-block content (i.e., surrounded by triple backticks) in any tiddler to be rendered using “inline-block” instead of the default “block” style.
Alternatively, if you want to limit the effect to just specific tiddlers, you can use the following:
.myCode pre { display:inline-block; }
and then add a field named “class” with a value of “myCode” to the desired tiddlers.
… and finally, if you want to limit the effect to just specific instances of code, you can directly embedded HTML syntax, like this:
<pre style="display:inline-block;"><code>This is some code-formatted text
The request is to have it only as wide as needed
</code></pre>
Note that this last method will not suppress automatic linking of WikiWords (aka, “CamelCase”), so your code may show links. You can override the rendering of WikiWord links by adding the following to the beginning of the tiddler:
\define tv-wikilinks() no
To apply this globally, you can go to the $:/ControlPanel, Settings tab and uncheck the “Enable automatic CamelCase linking” option.
enjoy,
-e
1 Like
Wow! now that’s what I call a comprehensive answer!
Works like a treat! thanks
You just got “Eric’d”. When it strikes from above, you come out as a more knowledgeable tiddlywikian.
1 Like