How do I put raw text / Javascript / CSS in my topics?

Selectively disabling Foswiki formatting rules

Sometime you want to be able to exert fine control over Foswiki's formatting rules in different parts of topics - for example, when you are presenting examples, or when you want to insert some bespoke content into your topics.

The answer is in multiple parts, because there are different solutions for different scenarios.

I want fixed-width font text

Use <verbatim> - for example,

%<nop>TOPIC% is %TOPIC%

I want fixed-width font text, but I want macros to be expanded

Use <pre> - for example,

Faq29 is Faq29

I want standard text, but I don't want Foswiki to auto-link

Use <noautolink> - for example: ThisisAValidTopicName

I want Foswiki to leave my content alone. Totally alone.

One of the great strengths of Foswiki is that it allows you to enter almost anything into topics, which can then be passed on to the browser. This feature means that the sky's the limit in terms of customising the presentation of your topics.

At the same time this feature can be a security risk, and many sites will disable Javascript in topics (usually by using the SafeWikiPlugin)

If your site does allow Javascript, or you want to insert content which isn't dangerous, such as CSS, you are still faced with a problem; how do you stop Foswiki from treating your content as TML (topic markup language) and applying formatting rules to it? The answer is the < literal> tag. Whatever is within the tag is passed "literally" on to the browser, without Foswiki trying to interpret any of it. For example, let's say you want to insert some CSS:

<style type="text/css"> Div.MyClass { background-color: red; /*%TOPIC%*/} </style>
<div class="MyClass">Red</div>

If you enter this directly in the topic without <literal> tags, you see this:

which is not what you intended. The reason is that Div.MyClass gets interpreted as a reference to a topic, and expanded to an HTML link, breaking the CSS ("view source" in the browser and search for "look here" to see what happened). To stop this happening, simply surround the styles <literal> tags:

<literal><style type="text/css">Div.MyClass { background-color: red; /*%TOPIC%*/} </style></literal>
<div class="MyClass">Red</div>

so you see what you originally wanted:

I want the WYSIWYG editor not to modify my content

The WYSIYWG editors convert from TML to editable HTML and back again. Because this process can sometimes change the underlying TML, you need to be able to protect it from the editor. The <sticky> tag stops the WYSIWYG editor from modifying whatever is in the tag.

<sticky>%MACRO{param="value"}%</sticky>

See WysiwygPlugin for more information on how TML is converted to HTML (and back again) for editing.

-- CrawfordCurrie - 27 Jun 2010