Importing Pygments

00:00 In this section, you will start using Pygments to use syntax highlighting in the code that you output in your code image generator. In Pygments, you generally need at least three components: a lexer that breaks up the code into chunks that Pygments understands, some style that determines how the highlighted code should look, and a formatter that defines the way the program will output the code.

00:26 While Pygments can understand more than 500 markup and programming languages, you will focus on Python code here. So you need a Python3Lexer(), and since you’re outputting HTML code on your web app, you will use an HtmlFormatter().

00:41 And as for the style, let’s have a look at what styles Pygments offers.

00:46 When you visit pygments.org/styles, you get an overview of all the styles that Pygments offers. And if you have a look at the names of the styles, you might recognize some of them from code editors.

00:59 So for example, monokai is a very famous theme that Sublime Text was using. And then there is github-dark, that’s the one that GitHub is using. And then there are some more low contrast themes.

01:11 It’s also interesting to see that you have light and dark themes. There is gruvbox that you might know. In order to continue with this code image generator, you can use any theme that you like as long as it’s listed here.

01:25 I personally like the dracula theme, so I will continue with the dracula theme.

01:32 In order to work with a lexer, the style, and the formatter, you need to import formats, the highlight() function, and lexers from Pygments.

01:42 So hop over to app.py and add in the three imports: from pygments import highlight. I will show the usage of this function in a moment once we are getting to it.

01:55 And then from pygments.formatters import HtmlFormatter, that’s an uppercase H and an uppercase F in HtmlFormatter. And then from pygments.lexers import Python3Lexer.

02:10 Here again, the P is uppercase and the L is also uppercase. And the 3 is the number three. Once you have highlight, HtmlFormatter and Python3Lexer imported, scroll down to the code function and create a formatter instance of the HtmlFormatter class.

02:28 And now when you instantiate this class, you can pass in a style. And since I want to work with the dracula theme, I pass in the variable style with the value dracula.

02:41 Again, if you want to work with another style, then you need to look at the Pygments styles website and take the string that matches your preferred style.

02:50 And now, instead of just having a string value for the code key in the context dictionary, you actually call the highlight() function, pass in the code, the Python3Lexer, and the formatter.

03:04 When you’re calling the highlight() function, you actually need to make sure that you’re also calling the Python3Lexer when you’re passing it in as an argument.

03:12 So it’s Python3Lexer(), and then an opening and the closing parentheses.

03:18 Before you can reload your code image generator site, you also need to make a slight adjustment in your base HTML template. Go to base.html and have a look at line 12 there.

03:30 You’re passing in the code variable. Since the highlight() function will return HTML, because you’re passing in the HtmlFormatter, Flask would literally display your HTML code as a string and not render the HTML.

03:45 If you want, try out what Flask does in this situation. But in order to make Flask render your HTML code, you need to add in the safe filter.

03:55 So that’s the pipe symbol, and the word safe after it. Hop over to the browser and reload your page and see if it’s working. And if it’s working, you at least shouldn’t see an error and there might be a slight change at least visually.

04:10 So let’s look under the hood, copy the URL, and hop over to your browser. Because the simple browser that I’m using in VS Code right now doesn’t offer this option, so in a browser like Firefox, Chrome, and Safari, if you’ve added it as an option, then you can inspect your website and see what’s happening under the hood.

04:30 The so-called dev tools are super handy if you want to inspect any website on the internet. So it’s worth trying this out on another website and see how the website looks under the hood.

04:40 For us here, it’s important that we have a look into the div with the class my_code, and then you can see that there is another div with the class highlight, a pre tag, and then a bunch of small spans that separate certain elements of our code.

04:57 And since there are those classes passed in, we can actually style those classes and that’s where the actual theme comes in handy. Now, you could go ahead and style classes by hand, but you don’t know what class names those different elements of your code will have.

05:13 So it’s good that Pygments does this for you. The only thing that you need to do is actually grab those styles and add them to the website. That’s what you’ll do in the next lesson.