[racket] [Frog] Code examples in handwritten HTML

From: Joe Gibbs Politz (joe at cs.brown.edu)
Date: Mon Oct 21 09:34:40 EDT 2013

I want to write an index page with some handwritten HTML using Frog,
and I want it to include source code.  Two issues.  First, it seems
like Frog doesn't respect my <pre> structure.  If I write something
like this in _src/index.html:

# Index page

<div class="container">
  <div class="row">
  <div class="col-md-4">
  Some exciting text!
  </div>
  <div class="col-md-8">
<pre>
fun sum(l :: List):
  cases(List) l:
    | empty => 0
    | link(first, rest) => first + sum(rest)
  end
where:
  sum([]) is 0
  sum([1, 2, 3]) is 6
end
</pre>
  </div>
  </div>
</div>


And then I build, the generated index looks like this:


 <div class="container">
  <div class="row">
   <div class="col-md-4"> Some exciting text!  </div>
   <div class="col-md-8">
    <pre> fun sum(l :: List): cases(List) l: | empty => 0 |
link(first, rest) => first + sum(rest) end where: sum([]) is 0
sum([1, 2, 3]) is 6 end </pre> </div> </div> </div></p>
        </div>

Which destroys my line breaks.  If I put in <br/>s at the end of each
line, breaks *are* preserved, but then there's two line breaks for
each line.


Next, I tried Pygments using ``` escapes, but I think this is just not
the right mixture of Markdown and inline HTML.  Something like:

# Index page

<div class="container">
  <div class="row">
  <div class="col-md-4">
  Some exciting text!
  </div>
  <div class="col-md-8">
```python
fun sum(l :: List):
  cases(List) l:
    | empty => 0
    | link(first, rest) => first + sum(rest)
  end
where:
  sum([]) is 0
  sum([1, 2, 3]) is 6
end
```
  </div>
  </div>
</div>


Generates HTML that prematurely closes the "row" and "container"
<div>s, and treats the "col-md-8" open tag as content that's part of
some enclosing div:

 <div class="container">
  <div class="row">
   <div class="col-md-4"> Some exciting text!  </div></div></div>
<div class=“col-md-8”> <code>`python fun sum(l ::
List): cases(List) l: | empty => 0 | link(first, rest) => first
+ sum(rest) end where: sum([]) is 0 sum([1, 2, 3]) is 6 end</code>`
</p>


What's the best way for me to write some code examples?  Is there just
a racket function I can escape to and call Pygments directly to get
HTML to inline?  Is the <pre> behavior a bug or is there something
else I should be doing to make that formatting stick?

Thanks,
Joe

Posted on the users mailing list.