present icon indicating copy to clipboard operation
present copied to clipboard

[MRG] Add syntax highlighting to code blocks

Open bkjohnson opened this issue 4 years ago • 3 comments

Description

This PR adds support for syntax highlighting on code blocks using pygments.

Related issues

  • #101
  • #109

Screenshots

Based on this markdown:

## Code blocks

```python
print("This is a test")
```

Foo

```js
const myFunc = (name, num) => {
  return [name, num + 4]
}

console.log(`Data is ${myFunc('John')[0]}`);
```

---

Here is a screenshot of the current output:

image

With asciimatics version 1.13.1.dev38+g1fde70e, the bug relating to parenthesis rendering is fixed:

image

Next steps

Here are the next steps just for this PR. I'm not planning on adding support for changing the styling theme - that can come later. I'm planning on refactoring and cleaning up, but feel free to offer any other suggestions.

  • [x] Ensure whitespace has background to match rest of block
  • [x] Stop code from being visually truncated
  • [x] Pad the block with a border of dark background squares
  • [x] Make sure multiple blocks can be rendered on same slide
  • [ ] Update docs/_static/demo.gif to show the new highlighting feature
  • [ ] Update asciimatics version to get bugfix when possible

bkjohnson avatar Sep 04 '21 03:09 bkjohnson

The PR works as-is, but I'd like to explore adding a custom HighlightedCode renderer and see if I can work the changes into the overall Scene/Effect structure.

bkjohnson avatar Sep 07 '21 03:09 bkjohnson

@vinayak-mehta after plenty of back and forth I think this is finally ready for review. I tried to make a new gif, but none of my recording tools can get a smooth framerate for the animations, so I'm not sure if I'll be able to update demo.gif.

bkjohnson avatar Sep 07 '21 15:09 bkjohnson

Hi,

Amazing PR @bkjohnson !

Would you consider merging and releasing this @vinayak-mehta ?

galuszkak avatar Feb 20 '23 21:02 galuszkak