[Script] Markdown Handouts and Bios

markdown.js
markdownNotesBio.js
markdownDocumentation.js



Simple example.....

Nice!  I can't wait to try it out!

I've been helping to playtest this. It is sheer black magic. Awesome job, Stephen!

Stephen has come out of his laboratory. I hope we see more from you in 2020.  We've missed your creative..., well, you get the idea. ;-)

What a way to start the new year! Simply marvelous! Can't wait to use it!

:O

It's been fun watching this in development. Can't wait to actually have some time to play with it!

keithcurtis said:

I've been helping to playtest this. It is sheer black magic. Awesome job, Stephen!

I've watched this from the sideline, and agree that it black magic.

Edit: So it seems all three scripts need to be installed for the Markdown to work, and the Documentation file generates the example handout, which then can be used as basis for your own CSS styles.

You can make notes with markdown without using any css if you only put "[md]" at the start of the gm notes section

NICE! :D

Exactly....

Ravenknight said:

NICE! :D

Edit: So it seems all three scripts need to be installed for the Markdown to work, and the Documentation file generates the example handout, which then can be used as basis for your own CSS styles.

You can make notes with markdown without using any css if you only put "[md]" at the start of the gm notes section

Should be able to have as many as you want.... 

Would like to think about HTML templates....

On the CSS do something like this....
spell_Template { <table><tr><td>Spell name</td><td>${ name }</td><td>Casting Time</td><td>${ CastingTime }</td><</tr></table>}

In the MD do something like this...
<spell_Template {name: "Magic Missle", CastingTime: "1seg"}>

Sure there is a better syntax/model to use... but you get the idea. 

I was messing with a statblock writeup the other night, and I agree. That would be handy. Too many <span> tags otherwise. And try as I might, I couldn't get a <div> to register.

keithcurtis said:

I was messing with a statblock writeup the other night, and I agree. That would be handy. Too many <span> tags otherwise. And try as I might, I couldn't get a <div> to register.

I will look at that div block.......

Stephen S. said:

keithcurtis said:

I was messing with a statblock writeup the other night, and I agree. That would be handy. Too many <span> tags otherwise. And try as I might, I couldn't get a <div> to register.

I will look at that div block.......

Its super picky as written.... div on one line (no spaces at the end)... content on many line... div on it on line (no spaces at the end

<div style="color: red;">
test
</div>

I guess the html templates should look something like RollTemplates

Stephen S. said:

Its super picky at written.... div on one line (no spaces at the end)... content on many line... div on it on line (no spaces at the end

<div style="color: red;">
test
</div>

That did it. I'll be cautious with my spacing. I think I wasn't putting a space after the colons.

Thanks!

This looks really awesome!

For those ( like me :p ) who don't know much CSS, do you have the code on hand for that example in the first post? Love the formatting

Seph said:

This looks really awesome!

For those ( like me :p ) who don't know much CSS, do you have the code on hand for that example in the first post? Love the formatting

Here's the code that I have been using. It's very similar. It's still a work in progress, though.

UPDATED CODE <<< This will stay current.

keithcurtis said:

Seph said:

This looks really awesome!

For those ( like me :p ) who don't know much CSS, do you have the code on hand for that example in the first post? Love the formatting

Here's the code that I have been using. It's very similar. It's still a work in progress, though.

Thanks Keith! I was having trouble getting the fronts right.

Is there a simple way to do a line-break?

Thank you, Keith!

Ravenknight said:

Is there a simple way to do a line-break?

I assume you mean a blank line? I discovered this by experimentation, though Stephen is working on a more official markdown solution. Enter a tab character on its own line.

keithcurtis said:

Ravenknight said:

Is there a simple way to do a line-break?

I assume you mean a blank line? I discovered this by experimentation, though Stephen is working on a more official markdown solution. Enter a tab character on its own line.

Yes, without something (a space or two) empty lines get tossed.

If you are looking for a break in text, working to add that in...

Hello<br>World
Hello<br/>World
Hello  //<--two spaces
World

Minor update to markdown.js

Added line breaks and made div a little less picky.

keithcurtis said:

Seph said:

This looks really awesome!

For those ( like me :p ) who don't know much CSS, do you have the code on hand for that example in the first post? Love the formatting

Here's the code that I have been using. It's very similar. It's still a work in progress, though.

Keith I love what you have done here, but being new to Markdown I was wondering if there was a walkthrough to show exactly what command I needed to write next to the information I am putting into the handout.  For example, I know that if i type # Heading.  I'll have a bold heading, but what subheadings and things of that nature?

Thanks in advance

Stephen is the one to answer this really. But the script basically uses standard markdown. 

 for images

I've made about 10 image classes for floating left or right, thumbnails, feature images, etc.

# H1

## H2...

Lists

- item 1

- item 2 

*italic*

**bold**

Google: "markdown syntax". Or the Basic Syntax on this page will give you most commands.

Eventually, I'll put together some sort of guideline for the styles I've created with Stephen's cool invention, but it's too soon. Much of the script is still being written.

Thanks for clarifying what markdown is, Keith, I was overcomplicating it for myself haha. And thanks again for sharing the styles you made! I can't wait to show off stuff like this to my players!

And thank YOU Stephen for making this possible in the first place!

If there's a way to add text in the GM Notes that doesn't get parsed into the handout, though, I'd love to know.

Here's the latest css I'm using (thanks to Stephen for invaluable help on the table definitions). I decided a gist was a better place to keep it than a pastebin. The latest script code is up at the top in Stephen's post.

I love this script.

Who needs a compendium formatted handout...?  Awesome addition.

Seph said:

If there's a way to add text in the GM Notes that doesn't get parsed into the handout, though, I'd love to know.

What would be nice it is to have this in the Notes and Bio field only.... toggle in and out of edit mode.

Oh yeah, like how the description box for a game on here works. That would make things much easier. For now, though, I can just use separate handouts for GM eyes only.

The latest version of the script allows for ad hoc <div> and <span>  tags. Anything you don't want to display in the top part wrap in a div like this:

<div style="display: none;">
Players will never survive my killer dungeon
</div>

Here are some screen shots of handouts I've been converting. Pardon that they're a little cramped. I'm on my Chromebook right now and too lazy to get up and use the real computer...

Note that the links in the tiefling entry above will open the Compendium Entry on those sub-races.

_{These screenshots contain art that is unofficial Fan Content permitted under the Fan Content Policy. Not approved/endorsed by Wizards. Portions of the materials used are property of Wizards of the Coast. ©Wizards of the Coast LLC.}

Omg Keith you're a lifesaver! And those handouts look so crisp! =D

Copying over Keith's CSS, I can't get the Mrs Eaves font to work. It just defaults to Garamond.

You would need to have the font installed on your computer. It's not a web font. Baskerville would be close, and is probably installed on more computers. Garamond isn't too far away. Actually, looking more closely, my handouts have been using Times New Roman. :D

I should probably list those as alts.

I've updated the gist. The serifed headers use the fonts in this order. You can adjust for personal preference or font availability:

    font-family: 'mrs eaves', 'times new roman', times, baskerville, garamond;

Mrs Eaves is the official font—it's a variant of Baskerville. I personally prefer Times New Roman out of all of these (I don't have Mrs Eaves and didn't realize until just now). My starting point was Homebrewery for css declarations, and I never bothered to check. If you change the order of preference, you may want to remove the line that says:

    font-weight: bolder;

in H1, H2 and H3 if you think the weight is too heavy. H4 doesn't muck with the weight.

It's really what you feel looks best on screen.

Can't seem to change font in my quote-boxes anymore.   font-family: 'Patrick Hand', cursive, sans-serif; doesn't do the trick.
Using Markdown, 1.0.6

Ravenknight said:

Can't seem to change font in my quote-boxes anymore.   font-family: 'Patrick Hand', cursive, sans-serif; doesn't do the trick.
Using Markdown, 1.0.6

Add the css selector "p.blockquote" to your css 

p.blockquote {font-family: [whatever]; etc; }

Stephen S. said:

Ravenknight said:

Can't seem to change font in my quote-boxes anymore.   font-family: 'Patrick Hand', cursive, sans-serif; doesn't do the trick.
Using Markdown, 1.0.6

Add the css selector "quote" to your css 

quote {font-family: [whatever]; etc; }

Thank you Stephen! That did the trick. ( Have I mentioned how much I love this script?! )

Ravenknight said:

Stephen S. said:

Ravenknight said:

Can't seem to change font in my quote-boxes anymore.   font-family: 'Patrick Hand', cursive, sans-serif; doesn't do the trick.
Using Markdown, 1.0.6

Add the css selector "quote" to your css 

quote {font-family: [whatever]; etc; }

Thank you Stephen! That did the trick. ( Have I mentioned how much I love this script?! )

I lied to you.... "p.blockquote" 

I edited my post :P

PS:
This is where things are at right now...

Stephen S. said:

Ravenknight said:

Stephen S. said:

Ravenknight said:

Can't seem to change font in my quote-boxes anymore.   font-family: 'Patrick Hand', cursive, sans-serif; doesn't do the trick.
Using Markdown, 1.0.6

Add the css selector "quote" to your css 

quote {font-family: [whatever]; etc; }

Thank you Stephen! That did the trick. ( Have I mentioned how much I love this script?! )

I lied to you.... "p.blockquote" 

I edited my post :P

PS:
This is where things are at right now...

I will just nod and say: "That's good!" :)

@Keith - Of course I need it installed. I've done web dev for years and I feel like an idiot. "Lato" worked for me when I tested, so I assumed somehow all google fonts would work, but I just have Lato installed.

One other minor note I have is that I can't get horizontal rules to work. No combination of --- ___ *** === works for me. It's not a big deal, I've done it by adding border-bottom to certain tags, but the Pathfinder 2e style uses a lot of them and it'd be easier to just use ===.

Three or more ====? 
We can add that.

But seeing this as standard....

I know this is asking a lot, but anyone care to explain how to go about with fonts / getting the background? Because right now from following the initial steps all I've managed to do is this. 

Just to be clear, I know how to install scripts, but beyond that, I'm risking by touching anything without some direct guidance.

Stephen S. said:

Three or more ====? 
We can add that.

But seeing this as standard....

My issue is that hyphens, asterisks, or underscores don't work. I accidentally thought equals also did it, but regardless, the hr doesn't seem to show? 

Richard Jokes said:

I know this is asking a lot, but anyone care to explain how to go about with fonts / getting the background? Because right now from following the initial steps all I've managed to do is this. 

Just to be clear, I know how to install scripts, but beyond that, I'm risking by touching anything without some direct guidance.

Do you have a styles handout that has a bunch of css declarations to handle all the styling? You need at least two handouts for this to work. Only enter text in the gm notes areas.

1) A style handout that begins with [css] as the first line. That will control all the styles using cascading style sheet syntax. When you save it, you will get a [css](-idnumber) as the first line.

2) All other handouts that use this stylesheet will need:

[md]
[css](-idnumber)

as the first two lines. Everything else in that handout will follow the rules as set up on the style sheet. If you are after a 5e look, you can use the code I linked above as the style declarations. If I have misunderstood what you are asking, let me know and we'll get you sorted out.

If you are unfamiliar with css, here is a tutorial.

<hr> added (thanks for the regex Aaron!)

Three flavors... style each as you like in your css.

keithcurtis said:

Richard Jokes said:

I know this is asking a lot, but anyone care to explain how to go about with fonts / getting the background? Because right now from following the initial steps all I've managed to do is this. 

Just to be clear, I know how to install scripts, but beyond that, I'm risking by touching anything without some direct guidance.

Do you have a styles handout that has a bunch of css declarations to handle all the styling? You need at least two handouts for this to work. Only enter text in the gm notes areas.

1) A style handout that begins with [css] as the first line. That will control all the styles using cascading style sheet syntax. When you save it, you will get a [css](-idnumber) as the first line.

2) All other handouts that use this stylesheet will need:

[md]
[css](-idnumber)

as the first two lines. Everything else in that handout will follow the rules as set up on the style sheet. If you are after a 5e look, you can use the code I linked above as the style declarations. If I have misunderstood what you are asking, let me know and we'll get you sorted out.

If you are unfamiliar with css, here is a tutorial.

Thanks. Again. Forum Champions/Creators here to save the day. This should be plenty to get me going in the right direction.