Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[misc] use highlight.js for syntax highlighting in blog post #18318

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

svalentin
Copy link
Collaborator

@svalentin svalentin commented Dec 20, 2024

To get highlighting to work, we just need to import the CSS and run the highlight.js that does the highlighting in JS client side. We can add the lines at the top of the blog post to do this. I've made it only support bash and python for now to help with detection. But if we have a reason to, we can remove that and let it try them all.
In a previous PR I've added the necessary <code> tags.

I've picked the theme a11y-light. Try the other themes here: https://highlightjs.org/demo
atom-one-light seems nice too.

Since we're highlighting nicely now, we can just remove the extra indendation.

I've also noticed that we're pretty good at specifying the language in code blocks in the changelog. So we can take that language and use it in the code block as a class to tell highlight.js exactly what language that code block is in.
If this is useful, we can remove the limitation of only python and bash support from the top configuration in the future.
This is useful for smaller blocks of a few lines where maybe it doesn't detect the language properly.

Using the modified script, here's a part of the html from the 1.14 blog:

<p>Mypy now supports type variable defaults using the new syntax described in PEP 696, which
was introduced in Python 3.13. Example:

<pre><code class="language-python">@dataclass
class Box[T = int]:  # Set default for &quot;T&quot;
    value: T | None = None

reveal_type(Box())                      # type is Box[int], since it&#x27;s the default
reveal_type(Box(value=&quot;Hello World!&quot;))  # type is Box[str]
</code></pre>

It looks like this in the html generated:
image

And in the blog post itself, with the blog CSS like heading colors or limited width:
image

@svalentin svalentin requested a review from JukkaL December 20, 2024 16:31
Toe get highlighting to work, we just need to import the CSS and run the
highlight.js that does the highlighting in JS client side.
We can add the lines at the top of the blog post to do this.
I've made it only support bash and python for now to help with
detection. But if we have a reason to, we can remove that and let it try
them all.
In a previous PR I've added the necessary <code> tags.

But since we're highlighting nicely now, we can just remove the extra
indendation.

I've also noticed that we're pretty good at specifying the language in
code blocks in the changelog. So we can take that language and use it in
the code block as a class to tell highlight.js exactly what language
that code block is in.
If this is useful, we can remove the limitation of only python and bash
support from the top configuration in the future.
This is useful for smaller blocks of a few lines where maybe it doesn't
detect the language properly.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant