Mercurial Hosting > luan

changeset 1812:f44dcb3fedf7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
docs - add code block
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 10 Jun 2024 14:41:48 -0600
parents 55d89a183c82
children fa0e73119b7c
files website/src/diff.html.luan website/src/hosting.html.luan website/src/lib/Shared.luan website/src/manual.html.luan website/src/site.css website/src/tutorial.html.luan
diffstat 6 files changed, 457 insertions(+), 399 deletions(-) [+]
line wrap: on
line diff
--- a/website/src/diff.html.luan	Wed May 15 18:02:28 2024 -0600
+++ b/website/src/diff.html.luan	Mon Jun 10 14:41:48 2024 -0600
@@ -138,28 +138,28 @@
 %>
 <p>Luan has no numeric <b>for</b> statement.  Luan only has generic <b>for</b> statement.  Instead of the numeric <b>for</b> statement, Luan uses the <code>range</code> function in a generic <b>for</b> statement like this:</p>
 
-<pre>
-	for i in range(from,to,step) do <em>block</em> end
-</pre>
+<code block>
+for i in range(from,to,step) do <em>block</em> end
+</code>
 
 <p>The Luan generic <b>for</b> statement is simpler than the Lua version because Luan only uses an expression, not an explist.  So a <b>for</b> statement like:</p>
 
-<pre>
-	for var_1, &middot;&middot;&middot;, var_n in exp do block end
-</pre>
+<code block>
+for var_1, &middot;&middot;&middot;, var_n in exp do block end
+</code>
 
 <p>is equivalent to the code:</p>
 
-<pre>
-	do
-		local f = exp
-		while true do
-			local var_1, &middot;&middot;&middot;, var_n = f()
-			if var_1 == nil then break end
-			block
-		end
+<code block>
+do
+	local f = exp
+	while true do
+		local var_1, &middot;&middot;&middot;, var_n = f()
+		if var_1 == nil then break end
+		block
 	end
-</pre>
+end
+</code>
 <%
 						end
 					}
@@ -177,9 +177,9 @@
 %>
 <p>Unlike Lua, Luan allows <b>or</b> and <b>and</b> expressions to be stand-alone statements.  This is useful in cases like this:</p>
 
-<pre>
-	x==5 or error "x should be 5"
-</pre>
+<code block>
+x==5 or error "x should be 5"
+</code>
 <%
 						end
 					}
--- a/website/src/hosting.html.luan	Wed May 15 18:02:28 2024 -0600
+++ b/website/src/hosting.html.luan	Mon Jun 10 14:41:48 2024 -0600
@@ -25,16 +25,19 @@
 <p>Luan is currently mostly used for building websites.  Luan <a href="https://hg.reactionary.software/repo/luan/file/tip/host">includes</a> a web hosting solution.  You can install this for your own use, or you can just use our web host for free.  I will explain how to use our web host.</p>
 
 <p>Start by creating an empty working directory.  In this working directory, create a sub-directory called <b>src</b>.  This will contain the website.  Now in the working directory, make shell script called <b>serve.sh</b> containing:</p>
-<pre>
-	luan luan:http/serve.luan src
-</pre>
+
+<code block>
+luan luan:http/serve.luan src
+</code>
 
 <p>Run this script and go to <a href="http://localhost:8080/">http://localhost:8080/</a> in your browser.  You should see the empty <b>src</b> directory.  Now put some HTML files in <b>src</b>.  You should see them in the browser.  If you click on an HTML file, it should render.  If you want HTML for the home page, use <b>index.html</b>.  To use Luan to generate HTML, use whatever.html.luan as described the <a href="tutorial.html">Luan tutorial</a>.</p>
 
 <p>Suppose your domain is <b>www.whatever.com</b>.  Our web host is <b>s1.luan.software</b>.  So create a DNS CNAME record pointing <b>www.whatever.com</b> to <b>s1.luan.software</b>.  Now make a shell script in the working directory called <b>push.sh</b> containing:</p>
-<pre>
-	luan luan:host/push.luan www.whatever.com password src
-</pre>
+
+<code block>
+luan luan:host/push.luan www.whatever.com password src
+</code>
+
 <p>Replace "password" with whatever password you want.</p>
 
 <p>Running this script will create your website.  Running it again will update your website.</p>
--- a/website/src/lib/Shared.luan	Wed May 15 18:02:28 2024 -0600
+++ b/website/src/lib/Shared.luan	Mon Jun 10 14:41:48 2024 -0600
@@ -40,7 +40,7 @@
 <%
 	for id, info in pairs(content) do
 %>
-			<li><a id="c_<%=id%>" href="#<%=id%>"><%=info.title%></a>
+			<li c_<%=id%> ><a id="c_<%=id%>" href="#<%=id%>"><%=info.title%></a>
 <%
 		local subs = info.subs
 		if subs ~= nil then
--- a/website/src/manual.html.luan	Wed May 15 18:02:28 2024 -0600
+++ b/website/src/manual.html.luan	Mon Jun 10 14:41:48 2024 -0600
@@ -246,9 +246,9 @@
 with the following code:
 </p>
 
-<pre>
-     raw_get(get_metatable(obj) or {}, "__" .. event_name)
-</pre>
+<code block>
+raw_get(get_metatable(obj) or {}, "__" .. event_name)
+</code>
 
 <p>
 Here are the events:
@@ -489,7 +489,7 @@
 and cannot be used as names:
 </p>
 
-<p keywords>
+<p list=keywords>
 	<span>and</span>
 	<span>break</span>
 	<span>catch</span>
@@ -532,13 +532,40 @@
 The following strings denote other tokens:
 </p>
 
-<pre>
-     +     -     *     /     %     ^     #
-     &amp;     ~     |     &lt;&lt;    &gt;&gt;    //
-     ==    ~=    &lt;=    &gt;=    &lt;     &gt;     =
-     (     )     {     }     [     ]     ::
-     ;     :     ,     .     ..    ...
-</pre>
+<p list=tokens>
+ 	<span>+</span>
+ 	<span>-</span>
+ 	<span>*</span>
+ 	<span>/</span>
+ 	<span>//</span>
+ 	<span>%</span>
+ 	<span>^</span>
+ 	<span>#</span>
+ 	<span>&amp;</span>
+ 	<span>~</span>
+ 	<span>|</span>
+ 	<span>==</span>
+ 	<span>~=</span>
+ 	<span>&lt;=</span>
+ 	<span>&gt;=</span>
+ 	<span>&lt;</span>
+ 	<span>&gt;</span>
+ 	<span>=</span>
+ 	<span>(</span>
+ 	<span>)</span>
+ 	<span>{</span>
+ 	<span>}</span>
+ 	<span>[</span>
+ 	<span>]</span>
+ 	<span>;</span>
+ 	<span>,</span>
+ 	<span>.</span>
+ 	<span>..</span>
+ 	<span>...</span>
+ 	<span>%&gt;</span>
+ 	<span>&lt;%</span>
+ 	<span>&lt;%=</span>
+</p>
 
 <p>
 <em>Literal strings</em>
@@ -620,16 +647,16 @@
 the five literal strings below denote the same string:
 </p>
 
-<pre>
-     a = 'alo\n123"'
-     a = "alo\n123\""
-     a = '\97lo\10\04923"'
-     a = [[alo
-     123"]]
-     a = [==[
-     alo
-     123"]==]
-</pre>
+<code block>
+a = 'alo\n123"'
+a = "alo\n123\""
+a = '\97lo\10\04923"'
+a = [[alo
+123"]]
+a = [==[
+alo
+123"]==]
+</code>
 
 <p>
 A <em>numerical constant</em> (or <em>numeral</em>)
@@ -874,10 +901,10 @@
 Thus the code
 </p>
 
-<pre>
-     i = 3
-     i, a[i] = i+1, 20
-</pre>
+<code block>
+i = 3
+i, a[i] = i+1, 20
+</code>
 
 <p>
 sets <code>a[3]</code> to 20, without affecting <code>a[4]</code>
@@ -886,18 +913,18 @@
 Similarly, the line
 </p>
 
-<pre>
-     x, y = y, x
-</pre>
+<code block>
+x, y = y, x
+</code>
 
 <p>
 exchanges the values of <code>x</code> and <code>y</code>,
 and
 </p>
 
-<pre>
-     x, y, z = y, z, x
-</pre>
+<code block>
+x, y, z = y, z, x
+</code>
 
 <p>
 cyclically permutes the values of <code>x</code>, <code>y</code>, and <code>z</code>.
@@ -1020,24 +1047,24 @@
 A <b>for</b> statement like
 </p>
 
-<pre>
-     for <em>var_1</em>, &middot;&middot;&middot;, <em>var_n</em> in <em>exp</em> do <em>block</em> end
-</pre>
+<code block>
+for <em>var_1</em>, &middot;&middot;&middot;, <em>var_n</em> in <em>exp</em> do <em>block</em> end
+</code>
 
 <p>
 is equivalent to the code:
 </p>
 
-<pre>
-     do
-       local <em>f</em> = <em>exp</em>
-       while true do
-         local <em>var_1</em>, &middot;&middot;&middot;, <em>var_n</em> = <em>f</em>()
-         if <em>var_1</em> == nil then break end
-         <em>block</em>
-       end
-     end
-</pre>
+<code block>
+do
+  local <em>f</em> = <em>exp</em>
+  while true do
+    local <em>var_1</em>, &middot;&middot;&middot;, <em>var_n</em> = <em>f</em>()
+    if <em>var_1</em> == nil then break end
+    <em>block</em>
+  end
+end
+</code>
 
 <p>
 Note the following:
@@ -1109,9 +1136,9 @@
 This is useful in cases like this:
 </p>
 
-<pre>
-	x==5 or error "x should be 5"
-</pre>
+<code block>
+x==5 or error "x should be 5"
+</code>
 <%
 						end
 					}
@@ -1152,22 +1179,22 @@
 <p>Template statements provide the full equivalent of <a href="http://en.wikipedia.org/wiki/JavaServer_Pages">JSP</a> but in a general way.  Template statements write to standard output.  For example:</p>
 </p>
 
-<pre>
-	local name = "Bob"
-	%&gt;
-	Hello &lt;%= name %&gt;!
-	Bye &lt;%= name %&gt;.
-	&lt;%
-</pre>
+<code block>
+local name = "Bob"
+%&gt;
+Hello &lt;%= name %&gt;!
+Bye &lt;%= name %&gt;.
+&lt;%
+</code>
 
 <p>
 is equivalent to the code:
 </p>
 
-<pre>
-	local name = "Bob"
-	require("luan:Io.luan").stdout.write( "Hello ", name , "!\nBye ", name , ".\n" )
-</pre>
+<code block>
+local name = "Bob"
+require("luan:Io.luan").stdout.write( "Hello ", name , "!\nBye ", name , ".\n" )
+</code>
 <%
 						end
 					}
@@ -1541,27 +1568,27 @@
 For example,
 </p>
 
-<pre>
-     a = { [f(1)] = g; "x", "y"; x = 1, f(x), [30] = 23; 45 }
-</pre>
+<code block>
+a = { [f(1)] = g; "x", "y"; x = 1, f(x), [30] = 23; 45 }
+</code>
 
 <p>
 is equivalent to
 </p>
 
-<pre>
-     do
-       local t = {}
-       t[f(1)] = g
-       t[1] = "x"         -- 1st exp
-       t[2] = "y"         -- 2nd exp
-       t.x = 1            -- t["x"] = 1
-       t[3] = f(x)        -- 3rd exp
-       t[30] = 23
-       t[4] = 45          -- 4th exp
-       a = t
-     end
-</pre>
+<code block>
+do
+  local t = {}
+  t[f(1)] = g
+  t[1] = "x"         -- 1st exp
+  t[2] = "y"         -- 2nd exp
+  t.x = 1            -- t["x"] = 1
+  t[3] = f(x)        -- 3rd exp
+  t[30] = 23
+  t[4] = 45          -- 4th exp
+  a = t
+end
+</code>
 
 <p>
 The order of the assignments in a constructor is undefined.
@@ -1765,7 +1792,7 @@
 to the vararg expression:
 </p>
 <pre>
-     CALL            PARAMETERS
+     CALL             PARAMETERS
      
      f(3)             a=3, b=nil
      f(3, 4)          a=3, b=4
@@ -1795,15 +1822,15 @@
 <p>
 A block between backticks is run and then whatever was sent to standard output is returned as a string.  Examples:
 </p>
-<pre>
-	local s = `%&gt;1 + 1 = &lt;%=1+1%&gt;&lt;%`
+<code block>
+local s = `%&gt;1 + 1 = &lt;%=1+1%&gt;&lt;%`
 
-	local s = ` fn(whatever) `
+local s = ` fn(whatever) `
 
-	local s = `%&gt;
-	...
-	&lt;%`
-</pre>
+local s = `%&gt;
+...
+&lt;%`
+</code>
 <p>
 Backticks complement <a href="#template_stmt">template statements</a>.
 </p>
@@ -1823,20 +1850,20 @@
 of the innermost block that includes the declaration.
 Consider the following example:
 </p>
-<pre>
-     x = 10                -- global variable
-     do                    -- new block
-       local x = x         -- new 'x', with value 10
-       print(x)            --&gt; 10
-       x = x+1
-       do                  -- another block
-         local x = x+1     -- another 'x'
-         print(x)          --&gt; 12
-       end
-       print(x)            --&gt; 11
-     end
-     print(x)              --&gt; 10  (the global one)
-</pre>
+<code block>
+local x = 10          -- global to module
+do                    -- new block
+  local x = x         -- new 'x', with value 10
+  print(x)            --&gt; 10
+  x = x+1
+  do                  -- another block
+    local x = x+1     -- another 'x'
+    print(x)          --&gt; 12
+  end
+  print(x)            --&gt; 11
+end
+print(x)              --&gt; 10  (the global one)
+</code>
 
 <p>
 Notice that, in a declaration like <code>local x = x</code>,
@@ -1858,14 +1885,15 @@
 defines new local variables.
 Consider the following example:
 </p>
-<pre>
-     a = {}
-     local x = 20
-     for i=1,10 do
-       local y = 0
-       a[i] = function () y=y+1; return x+y end
-     end
-</pre>
+
+<code block>
+local a = {}
+local x = 20
+for i=1,10 do
+  local y = 0
+  a[i] = function () y=y+1; return x+y end
+end
+</code>
 
 <p>
 The loop creates ten closures
@@ -1904,31 +1932,31 @@
 				end
 				subs = {
 					require = {
-						title = "<code>require (mod_uri)</code>"
+						title = "require (mod_uri)"
 						content = function()
 %>
 <p>
 Example use:
 </p>
-<pre>
-	local Table = require "luan:Table.luan"
-</pre>
+<code block>
+local Table = require "luan:Table.luan"
+</code>
 
 <p>
 Could be defined as:
 </p>
-<pre>
-	local function require(mod_name)
-		return <a href="#Package.load">Package.load</a>(mod_name) or <a href="#Luan.error">Luan.error</a>("module '"..mod_name.."' not found")
-	end
-</pre>
+<code block>
+local function require(mod_name)
+	return <a href="#Package.load">Package.load</a>(mod_name) or <a href="#Luan.error">Luan.error</a>("module '"..mod_name.."' not found")
+end
+</code>
 
 <p>
 A special case is:
 </p>
-<pre>
-	require "java"
-</pre>
+<code block>
+require "java"
+</code>
 
 <p>
 This enables Java in the current chunk if that chunk has permission to use Java.  If the chunk doesn't have permission to use Java, then an error is thrown.
@@ -1945,9 +1973,10 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local Luan = require "luan:Luan.luan"
-</pre>
+
+<code block>
+local Luan = require "luan:Luan.luan"
+</code>
 
 <p>
 The basic library provides basic functions to Luan that don't depend on other libaries.
@@ -1956,23 +1985,23 @@
 				end
 				subs = {
 					["Luan.do_file"] = {
-						title = "<code>Luan.do_file ([uri])</code>"
+						title = "Luan.do_file ([uri])"
 						content = function()
 %>
 <p>
 Could be defined as:
 </p>
-<pre>
-	function Luan.do_file(uri)
-		local fn = <a href="#Luan.load_file">Luan.load_file</a>(uri) or <a href="#Luan.error">Luan.error</a>("file '"..uri.."' not found")
-		return fn()
-	end
-</pre>
+<code block>
+function Luan.do_file(uri)
+	local fn = <a href="#Luan.load_file">Luan.load_file</a>(uri) or <a href="#Luan.error">Luan.error</a>("file '"..uri.."' not found")
+	return fn()
+end
+</code>
 <%
 						end
 					}
 					["Luan.error"] = {
-						title = "<code>Luan.error (message)</code>"
+						title = "Luan.error (message)"
 						content = function()
 %>
 <p>
@@ -1982,16 +2011,16 @@
 <p>
 Could be defined as:
 </p>
-<pre>
-	function Luan.error(message)
-		<a href="#Luan.new_error">Luan.new_error</a>(message).throw()
-	end
-</pre>
+<code block>
+function Luan.error(message)
+	<a href="#Luan.new_error">Luan.new_error</a>(message).throw()
+end
+</code>
 <%
 						end
 					}
 					["Luan.eval"] = {
-						title = "<code>Luan.eval (text [, source_name [, env]])</code>"
+						title = "Luan.eval (text [, source_name [, env]])"
 						content = function()
 %>
 <p>
@@ -2001,16 +2030,16 @@
 <p>
 Could be defined as:
 </p>
-<pre>
-	function Luan.eval(text,source_name, env)
-		return <a href="#Luan.load">Luan.load</a>( "return "..text, source_name or "eval", env )()
-	end
-</pre>
+<code block>
+function Luan.eval(text,source_name, env)
+	return <a href="#Luan.load">Luan.load</a>( "return "..text, source_name or "eval", env )()
+end
+</code>
 <%
 						end
 					}
 					["Luan.get_metatable"] = {
-						title = "<code>Luan.get_metatable (table)</code>"
+						title = "Luan.get_metatable (table)"
 						content = function()
 %>
 <p>
@@ -2024,7 +2053,7 @@
 						end
 					}
 					["Luan.hash_code"] = {
-						title = "<code>Luan.hash_code (v)</code>"
+						title = "Luan.hash_code (v)"
 						content = function()
 %>
 <p>
@@ -2034,7 +2063,7 @@
 						end
 					}
 					["Luan.ipairs"] = {
-						title = "<code>Luan.ipairs (t)</code>"
+						title = "Luan.ipairs (t)"
 						content = function()
 %>
 <p>
@@ -2054,22 +2083,22 @@
 <p>
 Could be defined as:
 </p>
-<pre>
-	function Luan.ipairs(t)
-		local i = 0
-		return function()
-			if i < #t then
-				i = i + 1
-				return i, t[i]
-			end
+<code block>
+function Luan.ipairs(t)
+	local i = 0
+	return function()
+		if i < #t then
+			i = i + 1
+			return i, t[i]
 		end
 	end
-</pre>
+end
+</code>
 <%
 						end
 					}
 					["Luan.load"] = {
-						title = "<code>Luan.load (text, [source_name [, env [, persist]]])</code>"
+						title = "Luan.load (text, [source_name [, env [, persist]]])"
 						content = function()
 %>
 <p>
@@ -2098,7 +2127,7 @@
 						end
 					}
 					["Luan.load_file"] = {
-						title = "<code>Luan.load_file (file_uri)</code>"
+						title = "Luan.load_file (file_uri)"
 						content = function()
 %>
 <p>
@@ -2110,7 +2139,7 @@
 						end
 					}
 					["Luan.new_error"] = {
-						title = "<code>Luan.new_error (message)</code>"
+						title = "Luan.new_error (message)"
 						content = function()
 %>
 <p>
@@ -2120,14 +2149,14 @@
 <p>
 To print the current stack trace, you could do:
 </p>
-<pre>
-	Io.print( Luan.new_error "stack" )
-</pre>
+<code block>
+Io.print( Luan.new_error "stack" )
+</code>
 <%
 						end
 					}
 					["Luan.pairs"] = {
-						title = "<code>Luan.pairs (t)</code>"
+						title = "Luan.pairs (t)"
 						content = function()
 %>
 <p>
@@ -2152,7 +2181,7 @@
 						end
 					}
 					["Luan.range"] = {
-						title = "<code>Luan.range (start, stop [, step])</code>"
+						title = "Luan.range (start, stop [, step])"
 						content = function()
 %>
 <p>
@@ -2162,37 +2191,37 @@
 <p>
 Example use:
 </p>
-<pre>
-	for i in range(1,10) do
-		Io.print("count up:",i)
-	end
-	for i in range(10,0,-1) do
-		Io.print("count down:",i)
-	end
-</pre>
+<code block>
+for i in range(1,10) do
+	Io.print("count up:",i)
+end
+for i in range(10,0,-1) do
+	Io.print("count down:",i)
+end
+</code>
 
 <p>
 Could be defined as:
 </p>
-<pre>
-	function Luan.range(start, stop, step)
-		step = step or 1
-		step == 0 and <a href="#Luan.error">Luan.error</a> "bad argument #3 (step may not be zero)"
-		local i = start
-		return function()
-			if step > 0 and i <= stop or step < 0 and i >= stop then
-				local rtn = i
-				i = i + step
-				return rtn
-			end
+<code block>
+function Luan.range(start, stop, step)
+	step = step or 1
+	step == 0 and <a href="#Luan.error">Luan.error</a> "bad argument #3 (step may not be zero)"
+	local i = start
+	return function()
+		if step > 0 and i <= stop or step < 0 and i >= stop then
+			local rtn = i
+			i = i + step
+			return rtn
 		end
 	end
-</pre>
+end
+</code>
 <%
 						end
 					}
 					["Luan.raw_equal"] = {
-						title = "<code>Luan.raw_equal (v1, v2)</code>"
+						title = "Luan.raw_equal (v1, v2)"
 						content = function()
 %>
 <p>
@@ -2204,7 +2233,7 @@
 						end
 					}
 					["Luan.raw_get"] = {
-						title = "<code>Luan.raw_get (table, index)</code>"
+						title = "Luan.raw_get (table, index)"
 						content = function()
 %>
 <p>
@@ -2217,7 +2246,7 @@
 						end
 					}
 					["Luan.raw_len"] = {
-						title = "<code>Luan.raw_len (v)</code>"
+						title = "Luan.raw_len (v)"
 						content = function()
 %>
 <p>
@@ -2230,7 +2259,7 @@
 						end
 					}
 					["Luan.raw_set"] = {
-						title = "<code>Luan.raw_set (table, index, value)</code>"
+						title = "Luan.raw_set (table, index, value)"
 						content = function()
 %>
 <p>
@@ -2244,7 +2273,7 @@
 						end
 					}
 					["Luan.set_metatable"] = {
-						title = "<code>Luan.set_metatable (table, metatable)</code>"
+						title = "Luan.set_metatable (table, metatable)"
 						content = function()
 %>
 <p>
@@ -2258,7 +2287,7 @@
 						end
 					}
 					["Luan.stringify"] = {
-						title = "<code>Luan.stringify (v [,options])</code>"
+						title = "Luan.stringify (v [,options])"
 						content = function()
 %>
 <p>
@@ -2268,7 +2297,7 @@
 						end
 					}
 					["Luan.to_string"] = {
-						title = "<code>Luan.to_string (v)</code>"
+						title = "Luan.to_string (v)"
 						content = function()
 %>
 <p>
@@ -2286,7 +2315,7 @@
 						end
 					}
 					["Luan.type"] = {
-						title = "<code>Luan.type (v)</code>"
+						title = "Luan.type (v)"
 						content = function()
 %>
 <p>
@@ -2305,7 +2334,7 @@
 						end
 					}
 					["Luan.values"] = {
-						title = "<code>Luan.values (&middot;&middot;&middot;)</code>"
+						title = "Luan.values (&middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -2322,7 +2351,7 @@
 						end
 					}
 					["Luan.VERSION"] = {
-						title = "<code>Luan.VERSION</code>"
+						title = "Luan.VERSION"
 						content = function()
 %>
 <p>
@@ -2341,9 +2370,9 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local Package = require "luan:Package.luan"
-</pre>
+<code block>
+local Package = require "luan:Package.luan"
+</code>
 
 <p>
 The package library provides basic
@@ -2353,7 +2382,7 @@
 				end
 				subs = {
 					["Package.load"] = {
-						title = "<code>Package.load (mod_uri)</code>"
+						title = "Package.load (mod_uri)"
 						content = function()
 %>
 <p>
@@ -2380,7 +2409,7 @@
 						end
 					}
 					["Package.loaded"] = {
-						title = "<code>Package.loaded</code>"
+						title = "Package.loaded"
 						content = function()
 %>
 <p>
@@ -2408,9 +2437,9 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local String = require "luan:String.luan"
-</pre>
+<code block>
+local String = require "luan:String.luan"
+</code>
 
 <p>
 This library provides generic functions for string manipulation,
@@ -2425,7 +2454,7 @@
 				end
 				subs = {
 					["String.char"] = {
-						title = "<code>String.char (&middot;&middot;&middot;)</code>"
+						title = "String.char (&middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -2438,7 +2467,7 @@
 						end
 					}
 					["String.contains"] = {
-						title = "<code>String.contains (s, s2)</code>"
+						title = "String.contains (s, s2)"
 						content = function()
 %>
 <p>
@@ -2448,7 +2477,7 @@
 						end
 					}
 					["String.encode"] = {
-						title = "<code>String.encode (s)</code>"
+						title = "String.encode (s)"
 						content = function()
 %>
 <p>
@@ -2458,7 +2487,7 @@
 						end
 					}
 					["String.ends_with"] = {
-						title = "<code>String.ends_with (s, s2)</code>"
+						title = "String.ends_with (s, s2)"
 						content = function()
 %>
 <p>
@@ -2468,7 +2497,7 @@
 						end
 					}
 					["String.find"] = {
-						title = "<code>String.find (s, s2 [, init])</code>"
+						title = "String.find (s, s2 [, init])"
 						content = function()
 %>
 <p>
@@ -2492,7 +2521,7 @@
 						end
 					}
 					["String.format"] = {
-						title = "<code>String.format (formatstring, &middot;&middot;&middot;)</code>"
+						title = "String.format (formatstring, &middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -2508,7 +2537,7 @@
 						end
 					}
 					["String.lower"] = {
-						title = "<code>String.lower (s)</code>"
+						title = "String.lower (s)"
 						content = function()
 %>
 <p>
@@ -2520,7 +2549,7 @@
 						end
 					}
 					["String.regex"] = {
-						title = "<code>String.regex (s)</code>"
+						title = "String.regex (s)"
 						content = function()
 %>
 <p>
@@ -2530,7 +2559,7 @@
 						end
 					}
 					["String.regex_quote"] = {
-						title = "<code>String.regex_quote (s)</code>"
+						title = "String.regex_quote (s)"
 						content = function()
 %>
 <p>
@@ -2540,7 +2569,7 @@
 						end
 					}
 					["String.repeated"] = {
-						title = "<code>String.repeated (s, n [, sep])</code>"
+						title = "String.repeated (s, n [, sep])"
 						content = function()
 %>
 <p>
@@ -2554,7 +2583,7 @@
 						end
 					}
 					["String.replace"] = {
-						title = "<code>String.replace (s, target, replacement)</code>"
+						title = "String.replace (s, target, replacement)"
 						content = function()
 %>
 <p>
@@ -2564,7 +2593,7 @@
 						end
 					}
 					["String.reverse"] = {
-						title = "<code>String.reverse (s)</code>"
+						title = "String.reverse (s)"
 						content = function()
 %>
 <p>
@@ -2574,7 +2603,7 @@
 						end
 					}
 					["String.split"] = {
-						title = "<code>String.split (s, s2 [, limit])</code>"
+						title = "String.split (s, s2 [, limit])"
 						content = function()
 %>
 <p>
@@ -2584,7 +2613,7 @@
 						end
 					}
 					["String.starts_with"] = {
-						title = "<code>String.starts_with (s, s2)</code>"
+						title = "String.starts_with (s, s2)"
 						content = function()
 %>
 <p>
@@ -2594,7 +2623,7 @@
 						end
 					}
 					["String.sub"] = {
-						title = "<code>String.sub (s, i [, j])</code>"
+						title = "String.sub (s, i [, j])"
 						content = function()
 %>
 <p>
@@ -2624,7 +2653,7 @@
 						end
 					}
 					["String.to_binary"] = {
-						title = "<code>String.to_binary (s)</code>"
+						title = "String.to_binary (s)"
 						content = function()
 %>
 <p>
@@ -2634,7 +2663,7 @@
 						end
 					}
 					["String.to_number"] = {
-						title = "<code>String.to_number (s [, base])</code>"
+						title = "String.to_number (s [, base])"
 						content = function()
 %>
 <p>
@@ -2661,7 +2690,7 @@
 						end
 					}
 					["String.trim"] = {
-						title = "<code>String.trim (s)</code>"
+						title = "String.trim (s)"
 						content = function()
 %>
 <p>
@@ -2671,7 +2700,7 @@
 						end
 					}
 					["String.unicode"] = {
-						title = "<code>String.unicode (s [, i [, j]])</code>"
+						title = "String.unicode (s [, i [, j]])"
 						content = function()
 %>
 <p>
@@ -2686,7 +2715,7 @@
 						end
 					}
 					["String.upper"] = {
-						title = "<code>String.upper (s)</code>"
+						title = "String.upper (s)"
 						content = function()
 %>
 <p>
@@ -2715,7 +2744,7 @@
 				end
 				subs = {
 					["regex.find"] = {
-						title = "<code>regex.find (s [, init])</code>"
+						title = "regex.find (s [, init])"
 						content = function()
 %>
 <p>
@@ -2739,7 +2768,7 @@
 						end
 					}
 					["regex.gmatch"] = {
-						title = "<code>regex.gmatch (s)</code>"
+						title = "regex.gmatch (s)"
 						content = function()
 %>
 <p>
@@ -2756,26 +2785,26 @@
 will iterate over all the words from string <code>s</code>,
 printing one per line:
 </p>
-<pre>
-	local r = String.regex[[\w+]]
-	local s = "hello world from Lua"
-	for w in r.gmatch(s) do
-		print(w)
-	end
-</pre>
+<code block>
+local r = String.regex[[\w+]]
+local s = "hello world from Lua"
+for w in r.gmatch(s) do
+	print(w)
+end
+</code>
 
 <p>
 The next example collects all pairs <code>key=value</code> from the
 given string into a table:
 </p>
-<pre>
-	local t = {}
-	local r = String.regex[[(\w+)=(\w+)]]
-	local s = "from=world, to=Lua"
-	for k, v in r.gmatch(s) do
-		t[k] = v
-	end
-</pre>
+<code block>
+local t = {}
+local r = String.regex[[(\w+)=(\w+)]]
+local s = "from=world, to=Lua"
+for k, v in r.gmatch(s) do
+	t[k] = v
+end
+</code>
 
 <p>
 For this function, a caret '<code>^</code>' at the start of a pattern does not
@@ -2785,7 +2814,7 @@
 						end
 					}
 					["regex.gsub"] = {
-						title = "<code>regex.gsub (s, repl [, n])</code>"
+						title = "regex.gsub (s, repl [, n])"
 						content = function()
 %>
 <p>
@@ -2837,35 +2866,36 @@
 <p>
 Here are some examples:
 </p>
-<pre>
-	local r = String.regex[[(\w+)]]
-	local x = r.gsub("hello world", "$1 $1")
-	--&gt; x="hello hello world world"
 
-	local r = String.regex[[(\w+)]]
-	local x = r.gsub("hello world", "$0 $0", 1)
-	--&gt; x="hello hello world"
+<code block>
+local r = String.regex[[(\w+)]]
+local x = r.gsub("hello world", "$1 $1")
+--&gt; x="hello hello world world"
+
+local r = String.regex[[(\w+)]]
+local x = r.gsub("hello world", "$0 $0", 1)
+--&gt; x="hello hello world"
 
-	local r = String.regex[[(\w+)\s*(\w+)]]
-	local x = r.gsub("hello world from Luan", "$2 $1")
-	--&gt; x="world hello Luan from"
-	     
-	local r = String.regex[[\$(.*?)\$]]
-	local x = r.gsub("4+5 = $return 4+5$", function(s)
-		return load(s)()
-	end)
-	--&gt; x="4+5 = 9"
+local r = String.regex[[(\w+)\s*(\w+)]]
+local x = r.gsub("hello world from Luan", "$2 $1")
+--&gt; x="world hello Luan from"
+     
+local r = String.regex[[\$(.*?)\$]]
+local x = r.gsub("4+5 = $return 4+5$", function(s)
+	return load(s)()
+end)
+--&gt; x="4+5 = 9"
 
-	local r = String.regex[[\$(\w+)]]
-	local t = {name="lua", version="5.3"}
-	local x = r.gsub("$name-$version.tar.gz", t)
-	--&gt; x="lua-5.3.tar.gz"
-</pre>
+local r = String.regex[[\$(\w+)]]
+local t = {name="lua", version="5.3"}
+local x = r.gsub("$name-$version.tar.gz", t)
+--&gt; x="lua-5.3.tar.gz"
+</code>
 <%
 						end
 					}
 					["regex.match"] = {
-						title = "<code>regex.match (s [, init])</code>"
+						title = "regex.match (s [, init])"
 						content = function()
 %>
 <p>
@@ -2884,21 +2914,21 @@
 						end
 					}
 					["regex.matches"] = {
-						title = "<code>regex.matches (s)</code>"
+						title = "regex.matches (s)"
 						content = function()
 %>
 <p>
 Returns a boolean indicating whether the regex can be found in string <code>s</code>.
 This function is equivalent to
 </p>
-<pre>
-     return regex.match(s) ~= nil
-</pre>
+<code block>
+return regex.match(s) ~= nil
+</code>
 <%
 						end
 					}
 					["regex.set"] = {
-						title = "<code>regex.set (pattern)</code>"
+						title = "regex.set (pattern)"
 						content = function()
 %>
 <p>
@@ -2908,7 +2938,7 @@
 						end
 					}
 					["regex.split"] = {
-						title = "<code>regex.split (s [, limit])</code>"
+						title = "regex.split (s [, limit])"
 						content = function()
 %>
 <p>
@@ -2926,14 +2956,14 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local Binary = require "luan:Binary.luan"
-</pre>
+<code block>
+local Binary = require "luan:Binary.luan"
+</code>
 <%
 				end
 				subs = {
 					["Binary.binary"] = {
-						title = "<code>Binary.binary (&middot;&middot;&middot;)</code>"
+						title = "Binary.binary (&middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -2946,7 +2976,7 @@
 						end
 					}
 					["Binary.byte"] = {
-						title = "<code>Binary.byte (b [, i [, j]])</code>"
+						title = "Binary.byte (b [, i [, j]])"
 						content = function()
 %>
 <p>
@@ -2961,7 +2991,7 @@
 						end
 					}
 					["Binary.to_string"] = {
-						title = "<code>Binary.to_string (b [,charset])</code>"
+						title = "Binary.to_string (b [,charset])"
 						content = function()
 %>
 <p>
@@ -2979,9 +3009,9 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local Table = require "luan:Table.luan"
-</pre>
+<code block>
+local Table = require "luan:Table.luan"
+</code>
 
 <p>
 This library provides generic functions for table manipulation.
@@ -2991,7 +3021,7 @@
 				end
 				subs = {
 					["Table.clear"] = {
-						title = "<code>Table.clear (tbl)</code>"
+						title = "Table.clear (tbl)"
 						content = function()
 %>
 <p>
@@ -3001,7 +3031,7 @@
 						end
 					}
 					["Table.concat"] = {
-						title = "<code>Table.concat (list [, sep [, i [, j]]])</code>"
+						title = "Table.concat (list [, sep [, i [, j]]])"
 						content = function()
 %>
 <p>
@@ -3016,7 +3046,7 @@
 						end
 					}
 					["Table.copy"] = {
-						title = "<code>Table.copy (tbl [, i [, j]])</code>"
+						title = "Table.copy (tbl [, i [, j]])"
 						content = function()
 %>
 <p>
@@ -3028,7 +3058,7 @@
 						end
 					}
 					["Table.insert"] = {
-						title = "<code>Table.insert (list, pos, value)</code>"
+						title = "Table.insert (list, pos, value)"
 						content = function()
 %>
 <p>
@@ -3040,21 +3070,21 @@
 						end
 					}
 					["Table.is_empty"] = {
-						title = "<code>Table.is_empty (tbl)</code>"
+						title = "Table.is_empty (tbl)"
 						content = function()
 %>
 <%
 						end
 					}
 					["Table.is_list"] = {
-						title = "<code>Table.is_list (tbl)</code>"
+						title = "Table.is_list (tbl)"
 						content = function()
 %>
 <%
 						end
 					}
 					["Table.pack"] = {
-						title = "<code>Table.pack (&middot;&middot;&middot;)</code>"
+						title = "Table.pack (&middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -3066,7 +3096,7 @@
 						end
 					}
 					["Table.remove"] = {
-						title = "<code>Table.remove (list, pos)</code>"
+						title = "Table.remove (list, pos)"
 						content = function()
 %>
 <p>
@@ -3084,14 +3114,14 @@
 						end
 					}
 					["Table.size"] = {
-						title = "<code>Table.size (tbl)</code>"
+						title = "Table.size (tbl)"
 						content = function()
 %>
 <%
 						end
 					}
 					["Table.sort"] = {
-						title = "<code>Table.sort (list [, comp])</code>"
+						title = "Table.sort (list [, comp])"
 						content = function()
 %>
 <p>
@@ -3115,16 +3145,16 @@
 						end
 					}
 					["Table.unpack"] = {
-						title = "<code>Table.unpack (list [, i [, j]])</code>"
+						title = "Table.unpack (list [, i [, j]])"
 						content = function()
 %>
 <p>
 Returns the elements from the given list.
 This function is equivalent to
 </p>
-<pre>
-     return list[i], list[i+1], &middot;&middot;&middot;, list[j]
-</pre>
+<code block>
+return list[i], list[i+1], &middot;&middot;&middot;, list[j]
+</code>
 
 <p>
 By default, <code>i</code> is 1 and <code>j</code> is <code>list.n or #list</code>.
@@ -3141,14 +3171,14 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local Number = require "luan:Number.luan"
-</pre>
+<code block>
+local Number = require "luan:Number.luan"
+</code>
 <%
 				end
 				subs = {
 					["Number.double"] = {
-						title = "<code>Number.double (x)</code>"
+						title = "Number.double (x)"
 						content = function()
 %>
 <p>
@@ -3158,7 +3188,7 @@
 						end
 					}
 					["Number.float"] = {
-						title = "<code>Number.float (x)</code>"
+						title = "Number.float (x)"
 						content = function()
 %>
 <p>
@@ -3168,7 +3198,7 @@
 						end
 					}
 					["Number.integer"] = {
-						title = "<code>Number.integer (x)</code>"
+						title = "Number.integer (x)"
 						content = function()
 %>
 <p>
@@ -3180,7 +3210,7 @@
 						end
 					}
 					["Number.long"] = {
-						title = "<code>Number.long (x)</code>"
+						title = "Number.long (x)"
 						content = function()
 %>
 <p>
@@ -3192,7 +3222,7 @@
 						end
 					}
 					["Number.long_to_string"] = {
-						title = "<code>Number.long_to_string (i, radix)</code>"
+						title = "Number.long_to_string (i, radix)"
 						content = function()
 %>
 <p>
@@ -3202,7 +3232,7 @@
 						end
 					}
 					["Number.type"] = {
-						title = "<code>Number.type (x)</code>"
+						title = "Number.type (x)"
 						content = function()
 %>
 <p>
@@ -3220,9 +3250,9 @@
 <p>
 Include this library by:
 </p>
-<pre>
-	local Math = require "luan:Math.luan"
-</pre>
+<code block>
+local Math = require "luan:Math.luan"
+</code>
 
 <p>
 This library provides basic mathematical functions.
@@ -3232,7 +3262,7 @@
 				end
 				subs = {
 					["Math.abs"] = {
-						title = "<code>Math.abs (x)</code>"
+						title = "Math.abs (x)"
 						content = function()
 %>
 <p>
@@ -3242,7 +3272,7 @@
 						end
 					}
 					["Math.acos"] = {
-						title = "<code>Math.acos (x)</code>"
+						title = "Math.acos (x)"
 						content = function()
 %>
 <p>
@@ -3252,7 +3282,7 @@
 						end
 					}
 					["Math.asin"] = {
-						title = "<code>Math.asin (x)</code>"
+						title = "Math.asin (x)"
 						content = function()
 %>
 <p>
@@ -3262,7 +3292,7 @@
 						end
 					}
 					["Math.atan"] = {
-						title = "<code>Math.atan (y, x)</code>"
+						title = "Math.atan (y, x)"
 						content = function()
 %>
 <p>
@@ -3275,7 +3305,7 @@
 						end
 					}
 					["Math.ceil"] = {
-						title = "<code>Math.ceil (x)</code>"
+						title = "Math.ceil (x)"
 						content = function()
 %>
 <p>
@@ -3285,7 +3315,7 @@
 						end
 					}
 					["Math.cos"] = {
-						title = "<code>Math.cos (x)</code>"
+						title = "Math.cos (x)"
 						content = function()
 %>
 <p>
@@ -3295,7 +3325,7 @@
 						end
 					}
 					["Math.deg"] = {
-						title = "<code>Math.deg (x)</code>"
+						title = "Math.deg (x)"
 						content = function()
 %>
 <p>
@@ -3305,7 +3335,7 @@
 						end
 					}
 					["Math.exp"] = {
-						title = "<code>Math.exp (x)</code>"
+						title = "Math.exp (x)"
 						content = function()
 %>
 <p>
@@ -3316,7 +3346,7 @@
 						end
 					}
 					["Math.floor"] = {
-						title = "<code>Math.floor (x)</code>"
+						title = "Math.floor (x)"
 						content = function()
 %>
 <p>
@@ -3326,7 +3356,7 @@
 						end
 					}
 					["Math.fmod"] = {
-						title = "<code>Math.fmod (x, y)</code>"
+						title = "Math.fmod (x, y)"
 						content = function()
 %>
 <p>
@@ -3337,7 +3367,7 @@
 						end
 					}
 					["Math.huge"] = {
-						title = "<code>Math.huge</code>"
+						title = "Math.huge"
 						content = function()
 %>
 <p>
@@ -3347,7 +3377,7 @@
 						end
 					}
 					["Math.log"] = {
-						title = "<code>Math.log (x [, base])</code>"
+						title = "Math.log (x [, base])"
 						content = function()
 %>
 <p>
@@ -3359,7 +3389,7 @@
 						end
 					}
 					["Math.max"] = {
-						title = "<code>Math.max (x, &middot;&middot;&middot;)</code>"
+						title = "Math.max (x, &middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -3370,7 +3400,7 @@
 						end
 					}
 					["Math.max_integer"] = {
-						title = "<code>Math.max_integer</code>"
+						title = "Math.max_integer"
 						content = function()
 %>
 <p>
@@ -3380,7 +3410,7 @@
 						end
 					}
 					["Math.min"] = {
-						title = "<code>Math.min (x, &middot;&middot;&middot;)</code>"
+						title = "Math.min (x, &middot;&middot;&middot;)"
 						content = function()
 %>
 <p>
@@ -3391,7 +3421,7 @@
 						end
 					}
 					["Math.min_integer"] = {
-						title = "<code>Math.min_integer</code>"
+						title = "Math.min_integer"
 						content = function()
 %>
 <p>
@@ -3401,7 +3431,7 @@
 						end
 					}
 					["Math.modf"] = {
-						title = "<code>Math.modf (x)</code>"
+						title = "Math.modf (x)"
 						content = function()
 %>
 <p>
@@ -3411,7 +3441,7 @@
 						end
 					}
 					["Math.pi"] = {
-						title = "<code>Math.pi</code>"
+						title = "Math.pi"
 						content = function()
 %>
 <p>
@@ -3421,7 +3451,7 @@
 						end
 					}
 					["Math.rad"] = {
-						title = "<code>Math.rad (x)</code>"
+						title = "Math.rad (x)"
 						content = function()
 %>
 <p>
@@ -3431,7 +3461,7 @@
 						end
 					}
 					["Math.random"] = {
-						title = "<code>Math.random ([m [, n])</code>"
+						title = "Math.random ([m [, n])"
 						content = function()
 %>
 <p>
@@ -3454,7 +3484,7 @@
 						end
 					}
 					["Math.sin"] = {
-						title = "<code>Math.sin (x)</code>"
+						title = "Math.sin (x)"
 						content = function()
 %>
 <p>
@@ -3464,7 +3494,7 @@
 						end
 					}
 					["Math.sqrt"] = {
-						title = "<code>Math.sqrt (x)</code>"
+						title = "Math.sqrt (x)"
 						content = function()
 %>
 <p>
@@ -3475,7 +3505,7 @@
 						end
 					}
 					["Math.tan"] = {
-						title = "<code>Math.tan (x)</code>"
+						title = "Math.tan (x)"
 						content = function()
 %>
 <p>
@@ -3500,22 +3530,27 @@
 <%		head() %>
 		<title>Luan Reference Manual</title>
 		<style>
-			p[keywords] {
+			p[list] {
 				font-family: monospace;
 				margin-left: 40px;
+			}
+			p[list] span {
+				display: inline-block;
+			}
+			p[list=keywords] {
 				max-width: 700px;
 			}
-			p[keywords] span {
-				display: inline-block;
+			p[list=keywords] span {
 				width: 100px;
 			}
-			code {
-				font-size: 16px;
-				font-weight: bold;
+			p[list=tokens] {
+				max-width: 400px;
 			}
-			div[toc] code {
-				font-size: inherit;
-				font-weight: inherit;
+			p[list=tokens] span {
+				width: 50px;
+			}
+			li[c_libs] li li > a {
+				font-family: monospace;
 			}
 		</style>
 	</head>
--- a/website/src/site.css	Wed May 15 18:02:28 2024 -0600
+++ b/website/src/site.css	Mon Jun 10 14:41:48 2024 -0600
@@ -62,8 +62,8 @@
 	font-size: 14px;
 }
 
-h4 code {
-	font-size: 1.4em;
+h4 {
+	font-size: 1.1em;
 }
 
 div[footer] {
@@ -74,3 +74,23 @@
 	height: 1em;
 	vertical-align: top;
 }
+
+code {
+	font-size: 16px;
+	font-weight: bold;
+}
+code[block] {
+	font-size: initial;
+	font-weight: initial;
+	background-color: #DDD;
+	padding: 2px;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	display: block;
+	padding: 1em;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+code[block]:first-line {
+	line-height: 0;
+}
--- a/website/src/tutorial.html.luan	Wed May 15 18:02:28 2024 -0600
+++ b/website/src/tutorial.html.luan	Mon Jun 10 14:41:48 2024 -0600
@@ -25,31 +25,31 @@
 
 <p>Create a file <b>hello.luan</b> containing:</p>
 
-<pre>
-	%&gt;
-	Hello World
-	&lt;%
-</pre>
+<code block>
+%&gt;
+Hello World
+&lt;%
+</code>
 
 <p>To run this, type <b>luan hello.luan</b> on the command line.  This should print <b>Hello World</b>.</p>
 
 <p>The syntax here is based on <a href="http://en.wikipedia.org/wiki/JavaServer_Pages">JSP</a>.  Let's change it a little:</p>
 
-<pre>
-	local name = "Bob"
-	%&gt;
-	Hello &lt;%= name %&gt;
-	&lt;%
-</pre>
+<code block>
+local name = "Bob"
+%&gt;
+Hello &lt;%= name %&gt;
+&lt;%
+</code>
 
 <p>This should print <b>Hello Bob</b>.  Now let's try a more conventional approach:</p>
 
-<pre>
-	local Io = require "luan:Io.luan"
-	local print = Io.print
+<code block>
+local Io = require "luan:Io.luan"
+local print = Io.print
 
-	print("Hello World")
-</pre>
+print("Hello World")
+</code>
 
 <p>In Luan, a function call with one string argument doesn't require parenthesis, so <b>print("Hello World")</b> is the same as <b>print "Hello World"</b> and <b>require "luan:Io.luan"</b> is the same as <b>require("luan:Io.luan")</b>.  Both <b>require</b> and <b>print</b> are functions.</p>
 
@@ -59,37 +59,37 @@
 
 <p>Let's a make fancier version:</p>
 
-<pre>
-	local Io = require "luan:Io.luan"
-	local print = Io.print
+<code block>
+local Io = require "luan:Io.luan"
+local print = Io.print
 
-	local function hello(name)
-		print("Hello "..name)
-	end
+local function hello(name)
+	print("Hello "..name)
+end
 
-	hello("Bob")
-</pre>
+hello("Bob")
+</code>
 
 <p>The <b>..</b> operator does concatenation.  This will print <b>Hello Bob</b>.</p>
 
 <p>Now let's make a web page.  First we need a directory for our website.  So create a directory <b>src</b>.  In this directory, create a file <b>hi.html.luan</b> containing:
 
-<pre>
-	local Io = require "luan:Io.luan"
-	local Http = require "luan:http/Http.luan"
-	
-	return function()
-		Io.stdout = Http.response.text_writer()
-	%&gt;
-	&lt;!doctype html>
-	&lt;html>
-		&lt;body>
-			Hello World
-		&lt;/body>
-	&lt;/html>
-	&lt;%
-	end
-</pre>
+<code block>
+local Io = require "luan:Io.luan"
+local Http = require "luan:http/Http.luan"
+
+return function()
+	Io.stdout = Http.response.text_writer()
+%&gt;
+&lt;!doctype html>
+&lt;html>
+	&lt;body>
+		Hello World
+	&lt;/body>
+&lt;/html>
+&lt;%
+end
+</code>
 
 <p>Now go back to the parent directory and do <b>luan luan:http/serve.luan src</b>.  This will run the Luan web server on port 8080.  Try going to <a href="http://localhost:8080/">http://localhost:8080/</a>.  You should see the directory.  If you click on <b>hi.html.luan</b> you will see the source.  But if you remove the <b>.luan</b> and just go to <a href="http://localhost:8080/hi.html">http://localhost:8080/hi.html</a> then you will run the program which will generate the web page.  In fact the page that you are currently looking at <b>tutorial.html</b> is generated from <a href="tutorial.html.luan">tutorial.html.luan</a>.</p>
 
@@ -99,9 +99,9 @@
 
 <p>So now you have built your website and you want to publish it to the web.  If you have your own domain, create a CNAME record for it pointing to <b>s1.luan.software</b>.  If you don't have a domain, just use a domain like <b>bob.s1.luan.software</b> (anything of the form <b>*.s1.luan.software</b>).  Assuming your directory is <b>src</b> and you will use the password <b>secret</b>, do the following from the command line:
 
-<pre>
-	luan luan:host/push.luan bob.s1.luan.software secret src
-</pre>
+<code block>
+luan luan:host/push.luan bob.s1.luan.software secret src
+</code>
 
 <p>The form is <b>luan luan:host/push.luan domain password directory</b>.  If you change your site, just run this again and your site will be updated.  To delete your site, do <b>luan luan:host/delete.luan domain password</b>.</p>