[MRG] Add syntax highlighting to code blocks #110

bkjohnson · 2021-09-04T03:13:44Z

Description

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

Related issues

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:

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

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.

Ensure whitespace has background to match rest of block
Stop code from being visually truncated
Pad the block with a border of dark background squares
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

I think the Effect may make it difficult/impossible to apply syntax highlighting to static text

The paint() function seems like the simplest way of rendering highlighted text, and it's only available on Screen or Canvas objects. This is why I'm not using an Effect for a code block.

We are no longer calling the _code() function, so we don't need to store the data in the same way. The code element tells us what to render, and the row will tell us where to place it on the slide. _code() will be removed later.

From this function we should be able to get the language from the block, then highlight and paint line by line

Once we get to the restart page, the animation loop keeps running and we get an error if we try to set `cur_slide` normally.

This solves the character rendering problems

bkjohnson

I'll try to refactor this for clarity.

present/slideshow.py

I don't like modifying slide.code_blocks in the get_effects function. The reason I'm doing it is because that is where we determine what row the code block will go on.

I don't want to get too carried away with this type of thing for this PR. I'm doing this to hopefully make it more obvious where code_blocks is coming from.

This is just a bit of cleanup for organization & clarity.

bkjohnson

Adding some context for reviewers. Unless changes are requested, the only other thing I'd like to do in this PR is bump the asciimatics version if the AnsiTerminalParser white foreground bug is fixed.

bkjohnson · 2021-09-07T02:01:28Z

setup.py

@@ -17,6 +17,7 @@
    "Click>=7.0",
    "mistune>=2.0.0a4",
    "pyfiglet>=0.8.post1",
+    "Pygments>=2.10.0",


pygments is the library that adds highlighting to the code. It has different styles/themes, but I'm leaving it on the default.

present/slideshow.py

I tested this change by putting a fireworks effect on the slide and checking to see if I got the ValueError.

bkjohnson · 2021-09-07T03:51:40Z

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.

This feels more in line with the Scene/Effect structure of the project.

This doesn't change the functionality - I'm just doing this since there isn't a particular reason to remove them, and I want to make the PR diff smaller.

bkjohnson · 2021-09-07T15:31:53Z

@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.

A user might use a code block and intentionally leave out the language for displaying logs or other things.

galuszkak · 2023-02-20T21:57:34Z

Hi,

Amazing PR @bkjohnson !

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

bkjohnson added 6 commits September 2, 2021 23:25

Remove the code effect

9fe2ceb

I think the Effect may make it difficult/impossible to apply syntax highlighting to static text

Render highlighted text on slide w/ placeholder

08b6f1f

The paint() function seems like the simplest way of rendering highlighted text, and it's only available on Screen or Canvas objects. This is why I'm not using an Effect for a code block.

Remove screen from the tuple

904015c

We are no longer calling the _code() function, so we don't need to store the data in the same way. The code element tells us what to render, and the row will tell us where to place it on the slide. _code() will be removed later.

Refactor into function for rendering entire block

98982e7

From this function we should be able to get the language from the block, then highlight and paint line by line

Render highlighted block line by line

9a6452e

Avoid going out of range on the slides index

9b195dd

Once we get to the restart page, the animation loop keeps running and we get an error if we try to set `cur_slide` normally.

bkjohnson mentioned this pull request Sep 6, 2021

Colored text output renders differently in Screen than in regular terminal peterbrittain/asciimatics#326

Closed

bkjohnson added 4 commits September 5, 2021 23:08

Add pygments to requires list

abadc0f

Switch parsers and don't use raw_text prop

cf796e1

This solves the character rendering problems

Add padded box around code

5f9a6c8

Remove now-unused _code effect

01f243a

bkjohnson commented Sep 7, 2021

View reviewed changes

present/slideshow.py Outdated Show resolved Hide resolved

present/slideshow.py Outdated Show resolved Hide resolved

bkjohnson added 4 commits September 6, 2021 18:04

Add to code_blocks directly instead of effects

b76a280

I don't like modifying slide.code_blocks in the get_effects function. The reason I'm doing it is because that is where we determine what row the code block will go on.

Refactor relationship between Slide and Slideshow

f866e19

I don't want to get too carried away with this type of thing for this PR. I'm doing this to hopefully make it more obvious where code_blocks is coming from.

Replace manual incrementing w/ enumerate func

62ed159

Reorder imports & rename variable

e8f8e55

This is just a bit of cleanup for organization & clarity.

bkjohnson commented Sep 7, 2021

View reviewed changes

bkjohnson marked this pull request as ready for review September 7, 2021 02:30

bkjohnson changed the title ~~[WIP] Add syntax highlighting to code blocks~~ [MRG] Add syntax highlighting to code blocks Sep 7, 2021

Refactor has_code to be based on code_blocks

c6041b8

I tested this change by putting a fireworks effect on the slide and checking to see if I got the ValueError.

bkjohnson marked this pull request as draft September 7, 2021 03:50

bkjohnson added 6 commits September 6, 2021 21:53

Use a custom asciimatics renderer instead

952e692

This feels more in line with the Scene/Effect structure of the project.

Remove extra whitespace

f0d1405

Add colour & bg args back in

c5ce9b2

This doesn't change the functionality - I'm just doing this since there isn't a particular reason to remove them, and I want to make the PR diff smaller.

Reflect syntax highlighting support in README

d564b3c

Add md language to code example

4db2276

Guess the language if code block doesn't specify

972eccf

bkjohnson marked this pull request as ready for review September 7, 2021 15:26

Don't try to guess the language

0675d97

A user might use a code block and intentionally leave out the language for displaying logs or other things.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MRG] Add syntax highlighting to code blocks #110

[MRG] Add syntax highlighting to code blocks #110

bkjohnson commented Sep 4, 2021 •

edited

Loading

bkjohnson left a comment

bkjohnson left a comment •

edited

Loading

bkjohnson Sep 7, 2021

bkjohnson commented Sep 7, 2021

bkjohnson commented Sep 7, 2021

galuszkak commented Feb 20, 2023

[MRG] Add syntax highlighting to code blocks #110

Are you sure you want to change the base?

[MRG] Add syntax highlighting to code blocks #110

Conversation

bkjohnson commented Sep 4, 2021 • edited Loading

Description

Related issues

Screenshots

Next steps

bkjohnson left a comment

Choose a reason for hiding this comment

bkjohnson left a comment • edited Loading

Choose a reason for hiding this comment

bkjohnson Sep 7, 2021

Choose a reason for hiding this comment

bkjohnson commented Sep 7, 2021

bkjohnson commented Sep 7, 2021

galuszkak commented Feb 20, 2023

bkjohnson commented Sep 4, 2021 •

edited

Loading

bkjohnson left a comment •

edited

Loading