Dash react-syntax-highlighter

Beautiful syntax highlighting for your Dash apps.



Made by Ploomber with ❤️

Deploy your Dash application on Ploomber.io for free.

syntax.mp4

Installation

pip install dash-react-syntax-highlighter

Usage

from dash import Dash, html
import dash_react_syntax_highlighter

app = Dash(__name__)

sample_code = """
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))
"""

app.layout = html.Div([
    html.H1("Dash React Syntax Highlighter"),
    dash_react_syntax_highlighter.DashReactSyntaxHighlighter(
        code=sample_code,
        language="python",
        styleName="okaidia"
    )
])

if __name__ == "__main__":
    app.run_server(debug=True)

Run demo locally

cd demo
pip install -r requirements.txt
python app.py

Open: http://localhost:8050

Documentation

Setup

npm install
pip install -r requirements.txt
pip install -r tests/requirements.txt

Development

npm run build
python demo.py

Release

# generate
npm run build
python setup.py sdist bdist_wheel
ls dist

# test artifact
pip install dash dist/dash_react_syntax_highlighter-0.0.1.tar.gz
python demo/app.py

# upload
pip install twine
twine upload dist/*

# clean up
rm -rf dist