{"size": 1395, "ext": "scrbl", "max_stars_repo_path": "scribblings/html-examples.scrbl", "max_stars_repo_name": "pmatos/html-examples", "max_stars_repo_stars_event_min_datetime": "2020-06-02T00:58:34.000Z", "max_stars_repo_stars_event_max_datetime": "2020-06-02T00:58:34.000Z", "max_issues_repo_path": "scribblings/html-examples.scrbl", "max_issues_repo_name": "pmatos/html-examples", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "scribblings/html-examples.scrbl", "max_forks_repo_name": "pmatos/html-examples", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 46.5, "max_line_length": 318, "alphanum_fraction": 0.7096774194}
#lang scribble/manual

@require[@for-label[html-examples
                    racket/base
                    txexpr]
         scribble/example]

@title{@tt{html-examples}: Examples in HTML}
@author[(author+email "Paulo Matos" "pmatos@linki.tools")]

One of the really interesting features of @hyperlink["https://docs.racket-lang.org/scribble/index.html"]{Scribble} is its ability to typeset racket examples and run them inside a sandbox. Note that the big thing here is that I am only typing @racket[(+ 1 1)] and Racket is doing the rest. 

@examples[
(+ 1 1)
]

I wanted this for my blog so I found a really simple way to obtain the HTML generated by Scribble and the result is @tt{html-examples}.

@defmodule[html-examples]

@defproc[(examples->html [x (or/c compound-paragraph? nested-flow?)]
                         [#:set-class new-class symbol? 'racket-examples])
         txexpr?]{
Produces a @racket[txexpr?] from examples block in @var[x].

The resulting @racket[txexpr?] will have css property class @var[new-class], which defaults to @racket['racket-examples].

@bold{Note:} This function will only provide you with the HTML for examples, you still need to add the CSS files to your webpage for it to look good. The required CSS files can be found in the @hyperlink["https://github.com/pmatos/html-examples/tree/master/assets"]{assets folder} of the @tt{html-examples} repository.
}
