[racket] [Frog] Code examples in handwritten HTML

From: Greg Hendershott (greghendershott at gmail.com)
Date: Mon Oct 21 13:29:20 EDT 2013

Fix pushed, and package catalog updated, so you can get it with:

    raco pkg update markdown

(Eventually I'll bump the version of the markdown pkg, and update
Frog's deps, but meanwhile the above should get you the fix.)

Let me know if you have any other questions.  Also, if you have things
you're pretty sure are bugs, you're also welcome to hit
https://github.com/greghendershott/frog/issues (just that repo is
fine; don't worry about whether it's likely a bug in Frog or the
Markdown parser, I can sort that out on my end).


On Mon, Oct 21, 2013 at 9:34 AM, Joe Gibbs Politz <joe at cs.brown.edu> wrote:
> 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.