Markdown Handouts script, because the old thread is closed

Here to talk about this thread and script. <a href="https://app.roll20.net/forum/post/8028597/script-markdown-handouts-and-bio" rel="nofollow">https://app.roll20.net/forum/post/8028597/script-markdown-handouts-and-bio</a> It would be really helpful to have a slightly more informative how to, for those uninitiated who are not as used to making assumptions about scripts and code related things. For example, after the initial setup, how do you then apply this to existing handouts that already have text in the regular 'descriptions and notes' area. Do you have to rebuild the handout from scratch, and put all wanted text into the GM Info section?&nbsp; Can you copy paste existing handout text into the GM info and have it work? Does it have to be placed after or before the code needed to link to the style sheet? Do you have to add &lt;divs&gt; and traditional HTML in the 'GM Info' along with whatever handout text you include for this to work? I'm posting this, because in my naivity, I copy pasted this:&nbsp; [md] [css](~bunchanumbersandletters) Into the GM info, and left the regular handout information in the 'descriptions and notes' the same(which had a lot in it). Then when I clicked save it DELETED ALL OF MY 'Descriptions and Notes' INFORMATION. I don't know why, or how that works, but a little bit more of a how to for dum dums who aren't coders could've helped me avoid this.&nbsp; I'm looking forward to using this, and very much appreciate the work put in to beautify Roll20. Does anyone have a little bit more advice on how to use it properly? Thanks!!

Daniel S. said: For example, after the initial setup, how do you then apply this to existing handouts that already have text in the regular 'descriptions and notes' area. Do you have to rebuild the handout from scratch, and put all wanted text into the GM Info section?&nbsp; Can you copy paste existing handout text into the GM info and have it work? Does it have to be placed after or before the code needed to link to the style sheet? Do you have to add &lt;divs&gt; and traditional HTML in the 'GM Info' along with whatever handout text you include for this to work? Hi Daniel! I'm not the author, but had a lot of long discussions with Stephen when he was writing this great script. 1. The editing approach is entirely different. You no longer put anything in the description area. That is completely re-written by the script. The script does not use the built in editor at all and will not recognize styled text. 2. You could copy the existing handout, paste it into a text-only editor to sanitize the contents to plain text and then paste that text into the gm notes area. You would need to use markdown formatting to style it to your needs.It does NOT convert existing handouts automatically. 3. Answered in 2, above. 4. No HTML is needed in the handout, but it does accept &lt;div&gt; and &lt;span&gt; tags if you are comfortable with those. There is CSS code in the style definition handout, but the actual handout is mostly styled using Markdown syntax in the GM notes area. I was under the impression that the thread had more documentation than that. It's possible the thread you linked was a followup thread. I'll see if I can find better links.

Ah, that third link creates the documentation handouts: markdown.js markdownNotesBio.js markdownDocumentation.js

Very much appreciated! This helps a lot. I tried to comb the original post a little more thoroughly as well, but it's great to have all that clarified and explained. Looking forward to eventually getting this thing working! In the meantime, I'm finding Stylus might be an easier short term approach. It seems that handouts styled with the markdown.js also style them for the players viewing them? That seems to be the major advantage, as well as additional markup options? Yes? Thanks!

Yes. Basically the script uses a css file to replace the contents of the handout with styled HTML text based on Markdown notes. That final HTML text needs no interpreter anymore (all of the CSS is now inline definition instead of interpreted on the fly). In addition to general text styling, the ability to format images with float property (making the text wrap around them), and to reference images that are not in the user library (I host mine on Imgur), are huge plusses. Be sure to comb through that thread for style definitions. I produced a fairly thorough 5e emulation.

Stlus is much easier, I think - but it has the drawback that everyone needs to install it and whatever styles you choose to use. It's purely a per-player solution. Once you start using stylus, you can't be sure the other players are seeing what you're seeing. But I found markdown extremely confusing, too, and the documentation very lacking.

Thanks! The extra info really helps. Integrating images into handouts opens up a lot of possibilities.

Thanks, Daniel for opening a new thread for Steven S's Markdown Script. I've also only just recently discovered its majesty and grace. I'm having issues with table text alignment. All columns are left aligned regardless of the specification in the md handout. The table md code below: |Cell A1|Cell B1|Cell B1| |:---|:----:|---:| |Cell A2|Cell B2|Cell B2| |Cell A3|Cell B3|Cell B3| |Cell A4|Cell B4|Cell B4| Renders as shown in this screenshot: This is taken directly from the Example Markdown handout generated from the script itself. I'm interested if any other users see this issue (and&nbsp; hoping that Kevin will swoop in and tell me what I'm doing wrong). Andrew

Hi Andrew! Have you made a definition for handling table cells in your css file? Ex: td.align-left { &nbsp; &nbsp; border-collapse:collapse; &nbsp; &nbsp; border: none !important; &nbsp; &nbsp; border-spacing: 0; &nbsp; &nbsp; border: 0px solid #ffffff !important; &nbsp; &nbsp; outline:none; &nbsp; &nbsp; padding-top: 2px; &nbsp; &nbsp; padding-bottom: 2px; &nbsp; &nbsp; text-align: left; } td.align-center { &nbsp; &nbsp; border-collapse:collapse; &nbsp; &nbsp; border: none !important; &nbsp; &nbsp; border-spacing: 0; &nbsp; &nbsp; border: 0px solid #ffffff !important; &nbsp; &nbsp; outline:none; &nbsp; &nbsp; padding-top: 2px; &nbsp; &nbsp; padding-bottom: 2px; &nbsp; &nbsp; text-align: center; } td.align-right { &nbsp; &nbsp; border-collapse:collapse; &nbsp; &nbsp; border: none !important; &nbsp; &nbsp; border-spacing: 0; &nbsp; &nbsp; border: 0px solid #ffffff !important; &nbsp; &nbsp; outline:none; &nbsp; &nbsp; padding-top: 2px; &nbsp; &nbsp; padding-bottom: 2px; &nbsp; &nbsp; text-align: right; } Define these however you like, and the |:---|:----:|---:| line should control the behavior properly.

Thanks Kevin! Yes, I loaded your CSS to test and eventually got it to work. I think that it was the rich text / plain text pasting issue that was tripping me up. I have been able to the tables to align properly now pasting as plain text. Andrew

Andrew said: I think that it was the rich text / plain text pasting issue that was tripping me up. I think this is good advice: whenever copying anything intended to be run by a computer, paste it into notepad, copy it again from there, and paste it into your actual program. This gets rid of any "features" added by word processing (like curly quotes) that mess up computer code.