I would like to write a document with some HTML code and next to it the result from a webpage.
Basically something like
\starthtmlexample <strong>Hello</strong>, <em>world<em> \stophtmlexample
Would print the code highlighted side by side to the result of how it looks in a website.
What I have in mind is that the environment
- creates a new file for each example with .html extension where it stores some code that goes before the contents of the environment;
- then the contents of the environment, in this case
- some post html tags to close the file;
then process the file with a command
firefox -screenshot "screenshot-\n.png" "file:///Users/blah/blah/file-\n.html"
(well, with options
--window-size="\certainwidth,\certainheight") to get a .png
then add side by side the code (colored with
\usemodule[vim]) and the image of the results.
Here's a “mockup”
\starttext Something like \starthtmlexample <strong>Hello</strong>, <em>world<em> \stophtmlexample should do something like % here v pre code \startbuffer <html> <strong>Hello</strong>, <em>world<em> </html> \stopbuffer % here ^ post code % save this buffer to a file, say, htmls/html-1.html % take a screenshot and save to screenshots/screenshot-1.png \startxtable[option=stretch] \startxrow \startxcell \typehtmlfile[htmls/html-1.html] % this seems buggy \stopxcell \startxcell \externalfile[screenshots/screenshot-1.png] \stopxcell \stopxrow \stopxtable \stoptext
And to be clear, I'm relatively new to ConTeXt, so this might be solvable with other systems, and this is an X Y problem.
My idea is to write a document with many small examples of html code.