app-generator / django-datta-able

Datta Able - Open-Source Django Dashboard | AppSeed
https://appseed.us/product/datta-able/django/
Other
542 stars 238 forks source link

Would like to add syntax highlighting to JSON displayed in HTML #44

Closed jswift24 closed 2 months ago

jswift24 commented 2 months ago

I'm displaying a JSON snippet: image

I'd like to add syntax highlighting, like what's described in the [docs ](https://django-datta-able-enh.appseed-srv1.com/elements-ac_syntax_highlighter.html but I can't get it working. Here's the code I'm using:

<pre><code id="json-output" class="json" style="font-size: 1rem;">{{ cohorts_json|json_format }}</code></pre>

<style>
pre {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
}
pre code.json {
    font-family: monospace;
    white-space: pre-wrap;
}
</style>

Please help.

app-generator commented 2 months ago

Hello @jswift24

Try integrate this: http://www.eslinstructor.net/vkbeautify/

image

jswift24 commented 2 months ago

Thanks. Looks like that plugin does pretty-printing. I'm looking for syntax highlighting (in colors). I thought this was built into the Datta Able template, doc link above?

app-generator commented 2 months ago

https://prismjs.com/plugins/jsonp-highlight/ might help

jswift24 commented 2 months ago

That worked great! Thank you.