Display HTML code snippet on a web page


(Gary Loch) #1

This may sound a bit strange but is it possible to display a block of html code on a RW page without it being rendered? I thought it would be easy - just use Format > HTML > Code but this doesn’t work. Here’s the code:

<a href="https://www.greenercamping.org" target="_blank">


(Gary Loch) #2

Oops, that’s not working - it’s rendering it here as well!


(Doug Bennett) #3

To display code (HTML on the forum select it and mark it as code the </> above where you type.


(Gary Loch) #4
 <a href="https://www.greenercamping.org" target="_blank">
<img src="https://www.greenercamping.org/why-gcc-horizontal.png" style=width:512”px;max-height:218px;border:0;”>
</a>

(Gary Loch) #5

That’s better. So is there a way to achieve the same result in RW?


(Gary Loch) #6

Thanks for the posting tip teefers!


(Doug Bennett) #7

You can use a markdown stack.
On a line by itself place three backquote marks in a row(Usually above the tab key next to the number 1 on most keyboards).
```
Then paste the code followed by a line by itself with the three backquotes(back tics).

```


(Gary Loch) #8

On it now…


(Gary Loch) #9

Very nice! Couldn’t find the key on this KB so cut and paste from yours. Works Brilliantly - thanks so much!


(Gary Loch) #10

I was also able to cut the code from here and past into text stack and that works too - but the markdown way is better. Strange though…


(Isaiah Carew) #11

Using Markdown and the triple quote code block automatically replaces some characters (mostly the < character) with a special bit of HTML that looks like a < character. This prevents the browser from interpreting your code block as HTML. It also styles it with your themes codeblock styles.

This isn’t really a feature of Stacks, just the way Markdown works everywhere — even here on this forum you can use the same triple quote to display code.

Markdown is always the preferred way to use Stacks. It produces clean symantec HTML and works with your theme instead of overriding it.


(Gary Loch) #12

Thanks very much for your response. Two points from this. Is there a way to replace the messed up < with a standard < in Markdown ? Although we haven’t seen problem so far. And, were you saying Markdown is the preferred stack over, say Text stack?


(Doug Bennett) #13

Not sure if I understand what you’re asking.
In markdown you can use single back quote’s around any text and it will be converted to an inline code chunck.
MarkDown also allows you to imbed actual HTML into markdown. So the “<“ symbol can be converted directly be using &lt;.

Markdown is really easy to learn and use. It only takes about a half an hour or so to pickup the basics.

Some markdown resources:

If you prefer to learn by video Wes Bos has a very good (34 minutes) video set.


(Isaiah Carew) #14

Markdown (and any time you see code on the web) swaps the < character with the HTML equivalent &lt; – but it can do more than that too.

And, were you saying Markdown is the preferred stack over, say Text stack?

Yes. Absolutely. In fact at the recent weaver conference I gave a whole talk about that. How to get the most of text in Stacks.

Text in RapidWeaver (these are not just Stacks features – Stacks leans on the underlying text systems inside of RapidWeaver) comes in 3 varieties:

  • Styled Text
  • HTML (or Plain Text)
  • Markdown

Styled Text (the Text stack) is great while you’re getting started, but it overrides your theme to produce some styles, has a lot of quirks, and generally makes the priority ease-of-use and familiarity with word-processing rather than correctness and consistency.

Markdown will never produce output that’s inconsistent and will always use correct-by-design HTML.

I know it’s a bit of a pain to learn a new way of doing things, but I promise that for anyone that takes the 30 minutes to familiarize themselves with it, the time spent will be paid back many times over with beautiful consistent sites.

If you’re spending a lot of time with RapidWeaver you owe it to yourself. :slight_smile:

Isaiah

P.S. – a little bird told me that Stacks 4 might come with a nice dedicated Markdown toolbar so that you can add Markdown styles with a simple click – look for it in the next couple months. :wink:

Super Tiny sneak peek:
Pasted_Image_10_28_18__5_06_PM