Blog-Sandbox"01/09/2023 - Adding Fancy Code Blocks
You better not be writing a coding article without having some fancy Code Blocks. At least two UX-related features are expected when you're facing a good old block'o code:
- Eye Candy: some sweet language-specific colorful syntax highlighting
- Usability: an easy way to copy-pasta dat free code
... Well here comes the "before/after" examples showing off how these markdown code blocks are being formatted. You should be able to copy a formatted block by simply clicking on it.
First a simple text block:
```text
Hello World
```
Now a simple shell command and its output:
```shell
$ tree foo/ foo ├── bar └── baz └── foo-bar-baz.txt 2 directories, 1 file
```
Let's see how well Python scripts are handled, they should turn out all nice and colorful:
```python
import foo as bar print('Hello World')
```
Inline code also gets some treats! Yup, it's also monospace-formatted and copy-able with a click of a button, check it out for yourself! You just have to , see ?! ... It doesn't get any though, I found that just gets in the way and reduces readability. This one just gets a single shade of blue.