3 ms·

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 a

by 0898 3y ago

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?

joshstrange 3y ago
Are you putting the monodraw text output into a code block or using a monospaced font?
- 0898 3y ago
  Which one is the dumb one? Because that's probably the one I'm doing.
  - joshstrange 3y ago
    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.
  - joshstrange 3y ago
    Here is an example of me using a code block in Wordpress but setting the max width: https://cs.joshstrange.com/r3pM1Vzs https://cs.joshstrange.com/r3pM1Vzs Here is how it looks rendered on desktop: https://cs.joshstrange.com/dvX5qKvf https://cs.joshstrange.com/dvX5qKvf Here is how it looks on mobile (broken): https://cs.joshstrange.com/pHNdKLxH 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 https://cs.joshstrange.com/1zTrXZGM But then Wordpress is going to complain: https://cs.joshstrange.com/ctGRh46j 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 https://cs.joshstrange.com/8FPgPBXp I hope this helps!
    - 0898 3y ago
      Thanks! This is really helpful - I’ll try this out soon.

by 0898 3y ago

joshstrange 3y ago

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

0898 3y ago
Which one is the dumb one? Because that's probably the one I'm doing.
- joshstrange 3y ago
  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.
- joshstrange 3y ago
  Here is an example of me using a code block in Wordpress but setting the max width: https://cs.joshstrange.com/r3pM1Vzs https://cs.joshstrange.com/r3pM1Vzs Here is how it looks rendered on desktop: https://cs.joshstrange.com/dvX5qKvf https://cs.joshstrange.com/dvX5qKvf Here is how it looks on mobile (broken): https://cs.joshstrange.com/pHNdKLxH 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 https://cs.joshstrange.com/1zTrXZGM But then Wordpress is going to complain: https://cs.joshstrange.com/ctGRh46j 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 https://cs.joshstrange.com/8FPgPBXp I hope this helps!
  - 0898 3y ago
    Thanks! This is really helpful - I’ll try this out soon.