posit-dev / posit-dev/py-shiny

Add highlight.js for syntax highlighting

Open
#491 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
Python
Stars
1.8k
Forks
135
Avg merge
2d 18h
Merged PRs (30d)
21

Description

(Reframing the issue based on the discussion)

Syntax highlighting with highlight.js will work with the code blocks that ui.markdown() produces, or any <pre><code> block. It requires:

  • A JS file
  • A CSS file, which varies by theme
  • A script tag to call highlightAll() on the page

We probably want to set the theme globally, like with bootswatch: the highlight.js interface does not seem to be set up to apply different style to parts of the page, nor does that seem worth the effort to support.

We need every ui.markdown() to call highlightAll(), like @wch shows below, so that dynamically generated UI gets updated.

If I understand correctly then, we either need to always add the highlight.js JS code, or only add the highlightAll call if highlight.js has been added to the page, or otherwise shim the Shiny JS so that hljs.highlightAll(); doesn't error if it is invoked in a markdown block but someone hasn't added highlighting/theming to the page.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the ui.markdown() output and how page-level JavaScript and CSS assets are included. Review the proposed highlightAll() call and theme handling, then confirm the integration covers both initial and dynamically generated markdown code blocks without errors when highlighting is absent.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.