<html><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"/><title>2 Quick tour</title><linkrel="stylesheet"type="text/css"href="scribble.css"title="default"/><linkrel="stylesheet"type="text/css"href="racket.css"title="default"/><linkrel="stylesheet"type="text/css"href="manual-style.css"title="default"/><linkrel="stylesheet"type="text/css"href="manual-racket.css"title="default"/><scripttype="text/javascript"src="scribble-common.js"></script><scripttype="text/javascript"src="manual-racket.js"></script><!--[if IE 6]><style type="text/css">.SIEHidden { overflow: hidden; }</style><![endif]--></head><bodyid="scribble-racket-lang-org"><divclass="tocset"><divclass="tocview"><divclass="tocviewlist tocviewlisttopspace"><divclass="tocviewtitle"><tablecellspacing="0"cellpadding="0"><tr><tdstyle="width: 1em;"><ahref="javascript:void(0);"title="Expand/Collapse"class="tocviewtoggle"onclick="TocviewToggle(this,"tocview_0");">▼</a></td><td></td><td><ahref="index.html"class="tocviewlink"data-pltdoc="x">Pollen:<spanclass="mywbr"> </span> the book is a program</a></td></tr></table></div><divclass="tocviewsublisttop"style="display: block;"id="tocview_0"><tablecellspacing="0"cellpadding="0"><tr><tdalign="right">1 </td><td><ahref="Installation.html"class="tocviewlink"data-pltdoc="x">Installation</a></td></tr><tr><tdalign="right">2 </td><td><ahref="quick-tour.html"class="tocviewselflink"data-pltdoc="x">Quick tour</a></td></tr><tr><tdalign="right">3 </td><td><ahref="Backstory.html"class="tocviewlink"data-pltdoc="x">Backstory</a></td></tr><tr><tdalign="right">4 </td><td><ahref="big-picture.html"class="tocviewlink"data-pltdoc="x">The big picture</a></td></tr><tr><tdalign="right">5 </td><td><ahref="first-tutorial.html"class="tocviewlink"data-pltdoc="x">First tutorial</a></td></tr><tr><tdalign="right">6 </td><td><ahref="second-tutorial.html"class="tocviewlink"data-pltdoc="x">Second tutorial</a></td></tr><tr><tdalign="right">7 </td><td><ahref="raco-pollen.html"class="tocviewlink"data-pltdoc="x">Using <spanclass="stt">raco pollen</span></a></td></tr><tr><tdalign="right">8 </td><td><ahref="File_formats.html"class="tocviewlink"data-pltdoc="x">File formats</a></td></tr><tr><tdalign="right">9 </td><td><ahref="reader.html"class="tocviewlink"data-pltdoc="x">◊ command overview</a></td></tr><tr><tdalign="right">10 </td><td><ahref="Module_reference.html"class="tocviewlink"data-pltdoc="x">Module reference</a></td></tr><tr><tdalign="right">11 </td><td><ahref="Acknowledgments.html"class="tocviewlink"data-pltdoc="x">Acknowledgments</a></td></tr><tr><tdalign="right">12 </td><td><ahref="License___source_code.html"class="tocviewlink"data-pltdoc="x">License & source code</a></td></tr><tr><tdalign="right"></td><td><ahref="doc-index.html"class="tocviewlink"data-pltdoc="x">Index</a></td></tr></table></div></div><divclass="tocviewlist"><tablecellspacing="0"cellpadding="0"><tr><tdstyle="width: 1em;"><ahref="javascript:void(0);"title="Expand/Collapse"class="tocviewtoggle"onclick="TocviewToggle(this,"tocview_1");">►</a></td><td>2 </td><td><ahref="quick-tour.html"class="tocviewselflink"data-pltdoc="x">Quick tour</a></td></tr></table><divclass="tocviewsublistbottom"style="display: none;"id="tocview_1"><tablecellspacing="0"cellpadding="0"><tr><tdalign="right">2.1 </td><td><ahref="quick-tour.html#%28part._.Creating_a_source_file%29"class="tocviewlink"data-pltdoc="x">Creating a source file</a></td></tr><tr><tdalign="right">2.2 </td><td><ahref="quick-tour.html#%28part._.Running_a_source_file%29"class="tocviewlink"data-pltdoc="x">Running a source file</a></td></tr><tr><tdalign="right">2.3 </td><td><ahref="quick-tour.html#%28part._.Naming__saving__and_rendering_a_source_file%29"class="tocviewlink"data-pltdoc="x">Naming, saving, and rendering a source file</a></td></tr><tr><tdalign="right">2.4 </td><td><a
<br/><spanstyle="font-weight: bold">Ubuntu</span>: ctrl + shift + U, then 25CA</p><p>The whole command <spanclass="stt">◊define[my-inset]{30%}</span> means “create a variable called <spanclass="stt">my-inset</span> and give it the value <spanclass="stt">30%</span>.”</p><p>Then put the variable into the HTML like so, this time using the ◊ character with the variable name in the two places the value appears:</p><blockquoteclass="SCodeFlow"><blockquoteclass="Rfilebox"><pclass="Rfiletitle"><spanclass="Rfilename"><spanclass="stt">"margin.html.pp"</span></span></p><blockquoteclass="Rfilecontent"><tablecellspacing="0"cellpadding="0"class="RktBlk"><tr><td><ahref="http://docs.racket-lang.org/guide/Module_Syntax.html#%28part._hash-lang%29"class="RktModLink"data-pltdoc="x"><spanclass="RktMod">#lang</span></a><spanclass="hspace"> </span><ahref="index.html"class="RktModLink"data-pltdoc="x"><spanclass="RktSym">pollen</span></a></td></tr><tr><td><spanclass="RktSym">◊define</span><spanclass="RktPn">[</span><spanclass="RktSym">my-inset</span><spanclass="RktPn">]</span><spanclass="RktPn">{</span><spanclass="RktSym">30%</span><spanclass="RktPn">}</span></td></tr><tr><td><spanclass="RktSym"><body</span><spanclass="hspace"> </span><spanclass="RktSym">style=</span><spanclass="RktVal">"margin: ◊my-inset; border:1px solid black"</span><spanclass="RktSym">></span></td></tr><tr><td><spanclass="RktSym">◊my-inset</span><spanclass="hspace"> </span><spanclass="RktSym">is</span><spanclass="hspace"> </span><spanclass="RktSym">the</span><spanclass="hspace"> </span><spanclass="RktSym">inset.</span></td></tr><tr><td><spanclass="RktSym"></body></span></td></tr></table></blockquote></blockquote></blockquote><p>Now reload <ahref="http://localhost:8080/margin.html"><spanclass="stt">margin.html</span></a>. You’ll see that the size of the margin has changed (because of the change to the <spanclass="stt">style</span> attribute) and so has the text of the HTML. If you like, try editing <spanclass="stt">my-inset</span> with different values and reloading the page. You can also try using <spanclass="RktSym">define</span> to create another variable (for instance, to change the color of the box border).</p><p>Still, this is the tiniest tip of the iceberg. The Pollen preprocessor gives you access to everything in the Racket programming language — including math functions, text manipulation, and so on.</p><h4>2.7<tt> </tt><aname="(part._.Markdown_mode)"></a>Markdown mode</h4><p>When used as a preprocessor, Pollen’s rule is that what you write is what you get. But if you’re targeting HTML, who wants to type out all those <spanclass="stt"><tedious>tags</tedious></span>? You can make Pollen do the heavy lifting by using it as a source decoder.</p><p>For instance, Markdown mode. Markdown is a simplified <ahref="https://daringfireball.net/projects/markdown/">notation system</a> for HTML. You can use Pollen’s Markdown decoder by inserting <spanclass="stt">#lang pollen</span> as the first line, and adding the <spanclass="stt">.pmd</span> file extension.</p><p>Try it. In DrRacket, create a file with the following lines and save it as <spanclass="stt">downtown.html.pmd</span>:</p><blockquoteclass="SCodeFlow"><blockquoteclass="Rfilebox"><pclass="Rfiletitle"><spanclass="Rfilename"><spanclass="stt">"downtown.html.pmd"</span></span></p><blockquoteclass="Rfilecontent"><tablecellspacing="0"cellpadding="0"class="RktBlk"><tr><td><ahref="http://docs.racket-lang.org/guide/Module_Syntax.html#%28part._hash-lang%29"class="RktModLink"data-pltdoc="x"><spanclass="RktMod">#lang</span></a><spanclass="hspace"> </span><ahref="index.html"class="RktModLink"data-pltdoc="x"><spanclass="RktSym">pollen</span></a></td></tr><tr><td><spanclass="hspace"> </span></td></tr><tr><td><spanclass="RktSym">Pollen</span><spanclass="hspace"> </span><spanclass="RktSym">+</span><spanclass="hspace">&n
