Code / CodeHighlighted

Partial Display

Escaped Pygments grammar highlighting, multiline tokens, line numbers, highlighted lines and localized copying.

Kumo reference: kumo-ui.com/components/code-highlighted/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Inline code

python manage.py runserver

Show template

{% load wdj %}
{% include "wdj/components/code.html" with code="python manage.py runserver" inline=True only %}

Code block

bash

python manage.py runserver

Show template

{% load wdj %}
{% include "wdj/components/code.html" with code="python manage.py runserver" lang="bash" only %}

Filename

settings.py python

DEBUG = False

Show template

{% load wdj %}
{% include "wdj/components/code.html" with code="DEBUG = False" lang="python" filename="settings.py" only %}

Without copy

python

print(123)

Show template

{% load wdj %}
{% include "wdj/components/code.html" with code="print(123)" lang="python" copyable=False only %}

Basic highlighting

python

from wdj import chartsoption = charts.line([{ "name": "Requests", "data": [10, 20, 30] }])# Server-owned datareturn option

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_python lang="python" only %}

TypeScript

const selected = "overview";function select(value) {  return value === selected;}

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_js lang="ts" only %}

Shell commands

bash

python -m pytestnpm run css:build

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_bash lang="bash" only %}

JSON

json

{  "name": "demo",  "enabled": true,  "count": 42}

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_json lang="json" only %}

CSS

css

.panel {  color: var(--color-kumo-default);  padding: 16px;}

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_css lang="css" only %}

Highlighted lines

python

from wdj import chartsoption = charts.line([{ "name": "Requests", "data": [10, 20, 30] }])# Server-owned datareturn option

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_python lang="python" highlight_lines="3-4" only %}

Line numbers

python

1from wdj import charts23option = charts.line([{ "name": "Requests", "data": [10, 20, 30] }])4# Server-owned data5return option

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_python lang="python" line_numbers=True only %}

Copy button

example.py

from wdj import chartsoption = charts.line([{ "name": "Requests", "data": [10, 20, 30] }])# Server-owned datareturn option

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_python lang="python" filename="example.py" only %}

Plain code surface

python

from wdj import chartsoption = charts.line([{ "name": "Requests", "data": [10, 20, 30] }])# Server-owned datareturn option

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_python lang="python" plain=True only %}

Full featured

example.py

1from wdj import charts23option = charts.line([{ "name": "Requests", "data": [10, 20, 30] }])4# Server-owned data5return option

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_python lang="python" line_numbers=True highlight_lines="3" filename="example.py" only %}

Localized copy action

json

{  "name": "demo",  "enabled": true,  "count": 42}

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_json lang="json" copy_label="Copiază codul" only %}

Shared server highlighter

Both examples use wdj.code.lines on the server and the same vendored theme.

example.js

const selected = "overview";function select(value) {  return value === selected;}

example.json

{  "name": "demo",  "enabled": true,  "count": 42}

Show template

{% load wdj %}
<p class="text-base text-kumo-subtle">Both examples use wdj.code.lines on the server and the same vendored theme.</p>{% include "wdj/components/code_highlighted.html" with code=audit_code_js lang="js" filename="example.js" only %}{% include "wdj/components/code_highlighted.html" with code=audit_code_json lang="json" filename="example.json" only %}

Custom highlight color

const selected = "overview";function select(value) {  return value === selected;}

Show template

{% load wdj %}
{% include "wdj/components/code_highlighted.html" with code=audit_code_js lang="js" highlight_lines="2-3" class="wdj-code-highlight-warning" only %}

Multiline grammar highlighting

report.sql

1/* A multiline comment2   retains its grammar state. */3SELECT name, 'Example' AS label4FROM resources5WHERE enabled = TRUE;

Show template

{% load wdj %}
{% include 'wdj/components/code_highlighted.html' with code=recommendation_code lang='sql' filename='report.sql' line_numbers=True highlight_lines='1-2' only %}

API Reference

Prop	Type	Default	Description
code	string	unset	Code; pass the documented value shown in the examples.
lang	string	unset	Lang; pass the documented value shown in the examples.
inline	bool	False	Inline; pass the documented value shown in the examples.
filename	string	unset	Filename; pass the documented value shown in the examples.
copyable	bool	True	Copyable; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.
highlighted.code	string / list	unset	Use code with wdj/components/code_highlighted.html. This is a separate template.
highlighted.lang	string / list	unset	Use lang with wdj/components/code_highlighted.html. This is a separate template.
highlighted.highlight_lines	string / list	unset	Use highlight_lines with wdj/components/code_highlighted.html. This is a separate template.
highlighted.line_numbers	bool	unset	Use line_numbers with wdj/components/code_highlighted.html. This is a separate template.
highlighted.plain	bool	unset	Use plain with wdj/components/code_highlighted.html. This is a separate template.
highlighted.filename	string / list	unset	Use filename with wdj/components/code_highlighted.html. This is a separate template.
highlighted.copyable	bool	unset	Use copyable with wdj/components/code_highlighted.html. This is a separate template.
highlighted.copy_label	string / list	unset	Use copy_label with wdj/components/code_highlighted.html. This is a separate template.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract