Rendering Code Blocks into Images with lookatme.contrib.render
Are you tired of plain and monotonous code blocks in your markdown files? Look no further! Introducing lookatme.contrib.render, an extension for lookatme that enables the rendering of code blocks into images. With this extension, you can enhance the visual presentation of your code snippets and make them more engaging for your readers.
To get started with lookatme.contrib.render, you need to have an image-rendering contrib extension installed for lookatme. One popular option is lookatme.contrib.urwid_ueberzug, which allows the display of images. Make sure you have this extension installed before proceeding.
Installation
To install lookatme.contrib.render, simply run the following command using pip:
bash
pip install lookatme.contrib.render
Usage
Once you have installed the extension, you can enable it by adding it to the metadata in the head of your markdown file:
“`txt
title:
<br>
author:<br>
extensions:<br>
– render
<hr>
<p>“`</p>
<p>Supported Languages</p>
<p>lookatme.contrib.render currently supports the following languages:</p>
<ul>
<li>
<p><code>dot</code>, <code>graphviz</code>: This language uses the Graphviz renderer. Make sure you have Graphviz installed by running <code>apt-get install graphviz</code>.</p>
</li>
<li>
<p><code>mermaid</code>: This language uses the mermaid.cli renderer. To use it, you need to install mermaid.cli by running <code>npm install mermaid.cli</code> and add it to your PATH by running <code>export PATH="$PATH:$(pwd)/node_modules/.bin"</code>.</p>
</li>
</ul>
<p>To specify the height of the rendered image, you can append <code>-N</code> or <code>N</code> to the code block language, where <code>N</code> represents the number of rows the image should use when displayed.</p>
<p>Here’s an example of rendering a mermaid-js graph with a height of 10 rows:</p>
<p>~~~<br>
<code>mermaid-10<br>
graph TD<br>
A0 -> B<br>
A1 -> B<br>
B -> C<br>
C -> D</code><br>
~~~</p>
<p>This will produce an image of the mermaid-js graph with a height of 10 rows.</p>
<p>For more examples and detailed information, please refer to the <a href="https://github.com/d0c-s4vage/lookatme.contrib.render">lookatme.contrib.render repository</a>.</p>
<p>In conclusion, the lookatme.contrib.render extension provides a powerful way to enhance the visual presentation of code blocks in markdown files. By rendering code into images, you can create more engaging and visually appealing content. Whether you want to showcase graphs, diagrams, or any other supported language, lookatme.contrib.render has you covered. Give it a try and take your code presentation to the next level!</p>
<p>If you have any questions or need further assistance, please feel free to ask.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/d0c-s4vage/lookatme.contrib.render">lookatme.contrib.render repository</a></li>
<li><a href="https://github.com/d0c-s4vage/lookatme.contrib.image_ueberzug">lookatme.contrib.urwid_ueberzug repository</a></li>
<li><a href="https://github.com/d0c-s4vage/lookatme">lookatme repository</a></li>
</ul>
Leave a Reply