Hacker News Reader

Comment by 0898 | Hacker News Reader

Can somebody help me? I've tried Monodraw a few times, but whenever I attempt to use the ASCII on a website (Wordpress, if that's important) the artwork never appears with the correct spacing. The tabs don't show up, or the alignment is off.

So I end up having to create a GIF, which defeats the purpose.

Any ideas?

View on HN

Are you putting the monodraw text output into a code block or using a monospaced font?

Which one is the dumb one? Because that's probably the one I'm doing.

Either of those options should work for you. Code blocks are almost always rendered with monospace fonts and manually setting a normal block of text to a monospaced font will do what you want as well.

The only other issue I can see is if your diagram is too large it might start wrapping which will break the “image” you are going for.

EDIT: See my sibling comment for examples of how to do this.

Here is an example of me using a code block in Wordpress but setting the max width:

https://cs.joshstrange.com/r3pM1Vzs

Here is how it looks rendered on desktop:

https://cs.joshstrange.com/dvX5qKvf

Here is how it looks on mobile (broken):

https://cs.joshstrange.com/pHNdKLxH

It will work if I set a `style="width: 1200px;"` on the `<pre>` tag (edit as html):

https://cs.joshstrange.com/1zTrXZGM

But then Wordpress is going to complain:

https://cs.joshstrange.com/ctGRh46j

You can always convert the block to HTML so it stop bugging you which will look gross in your editors but work when displayed:

https://cs.joshstrange.com/8FPgPBXp

I hope this helps!

Thanks! This is really helpful - I’ll try this out soon.

Reply on news.ycombinator.com