Hugo v0.93.0 diagrams as text (small) issue

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 :slight_smile:

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.

Interesting… I downloaded that svg from Releases and opened up in emacs and it’s doing the Right Thing (I wonder how :thinking: ):

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.