How to Write Highlighted Code Blocks in Mirror

Introduction

Mirror is a great publishing tool similar to Medium, but with their own characteristics that made them very attractive. Like the possibility of create and offer your Write NFT. I tested this tool importing an article I published in Medium.

Almost all the written was faithful it’s former format, but the code in Gist disappeared. I try different ways to embed the code, using links form Gist and from the same Medium post, it wasn’t possible, at least with the current version of Mirror. However if you go to my article here:

You can check that the all code is highlighted. So, how I did that? the answer begins saying Markdown.

Markdown

Reading the guide of Mirror I found that the editor uses Markdown. I start using the ``` to denote a code block. The problem is the highlighting if you write ```python to use with a python code, you get this:

python

The solution

I figured it was a editor issue checking for 3 back-sticks, I wrote my code on a text editor in my computer this:

I used the ```python with a tiny code. Then I pasted in the Mirror editor and got this:

for i in range(3):
    print(str(i))

Don’t worry if you don’t see the highlight on the fly, you will see it once it is published.

For Solidity I used JavaScript as ```js:

function withdraw() external onlyOwner { 
  (bool os, ) = payable(owner()).call{
  value: address(this).balance}("");
  require(os);
}

A JSON example used on the article, with ```json:

{
  "name": "Pet Number 1",
  "description": "Since almost all NFT are encoded in a number, we went ahead and created a Pet Number which is the number itself. A blank canvas for your imagination. All data is stored onchain. It has 32 bytes and each one represent a feature with up to 256 possibles traits. The rarity is created per feature (byte) with probabilities of 0.04% for 0, 0.09% for 1, 0.12% for 2, 0.15% for 3 and 0.39% for numbers 4 to 255.",
  "image": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmb250LXNpemU9IjQwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9Im5HIiBncmFkaWVudFRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iaHNsKDkzLDUwJSwgMjUlKSIvPjxzdG9wIG9mZnNldD0iOTUlIiBzdG9wLWNvbG9yPSJoc2woMjcwLDUwJSwgMjUlKSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSJ1cmwoJyNuRycpIi8+PHRleHQgeD0iNTAlIiB5PSI4MyIgZmlsbD0iaHNsKDg3LDEwMCUsIDgwJSkiPjYzMjcxOTk0Mjg2NDk8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSIxNjYiIGZpbGw9ImhzbCg4NywxMDAlLCA4MCUpIj41NjE5NzE4NDA5NzI3Nzc0PC90ZXh0Pjx0ZXh0IHg9IjUwJSIgeT0iMjQ5IiBmaWxsPSJoc2woODcsMTAwJSwgODAlKSI+NDUwOTA3MTg3MTEyMjk3NzwvdGV4dD48dGV4dCB4PSI1MCUiIHk9IjMzMiIgZmlsbD0iaHNsKDg3LDEwMCUsIDgwJSkiPjI3NzMwODg1NjU4MjYxNDc8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI0MTUiIGZpbGw9ImhzbCg4NywxMDAlLCA4MCUpIj44MjYyMjIyMzUyMDk1MzE4PC90ZXh0Pjwvc3ZnPg=="
}

Conclusion

I hope this simple article help you writing more readable code on your Mirror articles.

References

For a list of possibles language check this site:

Subscribe to 0x0ff0…0732
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.