Display Code Fragments in a Blog Entry


(Shawn Gano) #1

Hello - I am just learning my way around the tool and I am really puzzled by how I can easily add code samples to a simple blog entry. (Meaning I want to display actual source code with correct line breaks and indentation within the blog). I have found stacks plugins to do this but nothing that allows me to easily accomplish this within the blog feature which seems like something a lot of people would want to do. Any ideas?


(Laura ) #2

Bump! I’d also love a way to make this work. I tried formatting the code fragment as HTML Code, but then it just puts the text on one long line, not wrapping it to fit the body of the blog post.

I can change the formatting to a mono-spaced font instead, and that looks better, but discards all whitespace at the beginning each line, so the code looks awful.

Any suggestions most welcome!!


(Laura ) #3

Of course, as soon as I post I come up with something :smile:

You can use gist.github.com to create a public gist of your code, and then paste the <script> line into your blog post, and tell RapidWeaver to ignore formatting on that line. You get a nicely formatted block of code, but at the expense of having to load it remotely from another site.


(Isaiah Carew) #4

In general HTML content on web pages is rendered into the page. So displaying HTML tags on a page is not super easy. The “right” way to go about it is to encode any HTML special characters so that they don’t get rendered.

So, instead of writing:

<h2>wow</h2>

you could write:

&lt;h2>wow&lt;/h2>

github does this automagically when injecting a gist into the content of your page using a javascript to work the magic.

there is another way… but it’s not “correct”. it’s an HTML tag that was officially deprecated by the W3C in HTML 3.2…
…but…
it still works fine in all browsers that i’m aware of and it gets the job done. i don’t suspect it will actually stop working until there is a viable replacement for it. to use it you just add an <xmp>whatever</xmp> tag around whatever you want displayed as-is.

so the example above could be written as:

<xmp><h2>wow</h2></xmp>

You will, of course, have to do something inside the RapidWeaver page to tell RapidWeaver that you’re writing HTML. You can either use an HTML page, a Markdown page, an HTML stack, a Markdown stack – or if you want to add it inside a Styled Text area (or a Blog page) you can select the text and choose Formatting > HTML > Code