In this release, I think the example under “This means that you can write diagrams as text directly into diagrams, so this:” needs to be redone since it prints the bottom code delimiter (```) on the page when copy-pasted.
2 Likes
I’m not sure; we kind of need the “code fence delmiters” to be there in the example for the full example to make sense; I understand that it’s hard to copy and paste as it is now, but …
Then you need to push the bottom code delimiter to the left corner. Right now it’s printed on the page ‘as is’ since it is inline with the code.
I think you mean that it should be
```goat
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
```
instead of:
```goat
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
```
@bep The copied code block has whitespace indentation when copied using this button:
1 Like
Indeed!
The thing is, i need the 4 character indentation to prevent GitHub from blowing up (I searched and there is an open bug …). I’m pretty sure that @kaushalmodi 's example does not work on GitHub.
1 Like
I quickly tried it out on gist which should be using the same markdown parser as elsewhere on GitHub:
Yea, that works (I did not know about the “4 ticks” tricks).
1 Like
Cool! I just tested out in a Release in my fork of hugo 
That’s a very beautiful part of the markdown spec which I discovered painfully. This is really helpful when you have nested code blocks and stuff.
1 Like
When we talk about nit-picking, do you know of a way to style (text color) a SVG included in GitHub? The result SVG dos not show up in dark mode …
I fear that this might need the SVG CSS to auto-detect the prefers-color-scheme of the browser. First hit from Google search shows this: The best method for embedding dark-mode friendly SVG in HTML | Ctrl blog.
Interesting… I downloaded that svg from Releases and opened up in emacs and it’s doing the Right Thing (I wonder how 
):
whereas the same SVG on GitHub:
@bep Check out this another gist: trees.svg · GitHub
In the trees2.svg, I blindly added the CSS suggested in that blog post and it worked!
<svg class='diagram' xmlns='http://www.w3.org/2000/svg' version='1.1' height='153' width='712'>
<defs>
<style>
svg {
background-color: white;
color-scheme:light dark;
}
@media (prefers-color-scheme:dark) {
svg {
background-color: black;
}
}
</style>
</defs>
<g transform='translate(8,16)'>
..
But I believe, this will be something that the upstream package that’s processing the goat code blocks will have to do.
The SVG has the stroke set to currentColor which works like a charm for inline SVGs …
OK, inline styles actually worked – one learns something new every day.
1 Like
The caveat is that if someone needs a transparent background SVG, they will lose that. Yeah CSS is setting the background to either white or black.
May be this deserves a new code block attribute?
I made it simpler, just made the text black/white.
No, I actually think the built in SVG template related to this behaves sensible here, as it just uses the stroke/fill color of the surrounding container.
1 Like
I can confirm this. My background-color is 50% transparent and the background-image looks trough SVG.
1 Like
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.