https://github.com/ploomber/dash-react-syntax-highlighter
Syntax highlighting for code snippets in your Dash apps.
https://github.com/ploomber/dash-react-syntax-highlighter
dash-plotly
Last synced: 3 months ago
JSON representation
Syntax highlighting for code snippets in your Dash apps.
- Host: GitHub
- URL: https://github.com/ploomber/dash-react-syntax-highlighter
- Owner: ploomber
- License: other
- Created: 2024-09-25T21:38:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-02T16:17:51.000Z (over 1 year ago)
- Last Synced: 2025-11-21T11:02:56.600Z (5 months ago)
- Topics: dash-plotly
- Language: JavaScript
- Homepage: https://ploomber.io
- Size: 164 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-dash - Dash React Syntax Highlighter - Display code snippets with a copy button (Component Libraries)
README
Dash react-syntax-highlighter
Beautiful syntax highlighting for your Dash apps.
Made by Ploomber with ❤️
Deploy your Dash application on Ploomber.io for free.
https://github.com/user-attachments/assets/2e28e63b-5803-41fb-8253-faf35062e255
## Installation
```sh
pip install dash-react-syntax-highlighter
```
## Usage
```python
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
```sh
cd demo
pip install -r requirements.txt
python app.py
```
Open: http://localhost:8050
## Documentation
## Setup
```sh
npm install
pip install -r requirements.txt
pip install -r tests/requirements.txt
```
## Development
```sh
npm run build
python demo.py
```
## Release
```sh
# 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
```