docs: update templ highlighting and add nix, json and bash highlighti…

…ng (#1033)

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

docs/docs/02-quick-start/01-installation.md

@@ -4,7 +4,7 @@
 
 With Go 1.20 or greater installed, run:
 
-```sh
+```bash
 go install github.com/a-h/templ/cmd/templ@latest
 ```
 
@@ -16,13 +16,13 @@ Download the latest release from https://github.com/a-h/templ/releases/latest
 
 templ provides a Nix flake with an exported package containing the binary at https://github.com/a-h/templ/blob/main/flake.nix
 
-```sh
+```bash
 nix run github:a-h/templ
 ```
 
 templ also provides a development shell which includes all of the tools required to build templ, e.g. go, gopls etc. but not templ itself.
 
-```sh
+```bash
 nix develop github:a-h/templ
 ```
 

docs/docs/02-quick-start/02-creating-a-simple-templ-component.md

@@ -6,13 +6,13 @@ To create a templ component, first create a new Go project.
 
 Create a new directory containing our project.
 
-```sh
+```bash
 mkdir hello-world
 ```
 
 Initialize a new Go project within it.
 
-```sh
+```bash
 cd hello-world
 go mod init github.com/a-h/templ-examples/hello-world
 go get github.com/a-h/templ
@@ -36,7 +36,7 @@ templ hello(name string) {
 
 Run the `templ generate` command.
 
-```sh
+```bash
 templ generate
 ```
 
@@ -72,7 +72,7 @@ func main() {
 
 Running the code will render the component's HTML to stdout.
 
-```sh
+```bash
 go run .
 ```
 

docs/docs/02-quick-start/03-running-your-first-templ-application.md

@@ -32,13 +32,13 @@ func main() {
 
 Running the code will start a web server on port 3000.
 
-```sh
+```bash
 go run *.go
 ```
 
 If you run another terminal session and run `curl` you can see the exact HTML that is returned matches the `hello` component, with the name "John".
 
-```sh
+```bash
 curl localhost:3000
 ```
 

docs/docs/06-static-rendering/01-generating-static-html-files-with-templ.md

@@ -21,13 +21,13 @@ To render static HTML files using templ component, first create a new Go project
 
 Create a new directory.
 
-```sh
+```bash
 mkdir static-generator
 ```
 
 Initialize a new Go project within it.
 
-```sh
+```bash
 cd static-generator
 go mod init github.com/a-h/templ-examples/static-generator
 ```
@@ -50,7 +50,7 @@ templ hello(name string) {
 
 Run the `templ generate` command.
 
-```sh
+```bash
 templ generate
 ```
 
@@ -94,7 +94,7 @@ func main() {
 
 Running the code will create a file called `hello.html` containing the component's HTML.
 
-```sh
+```bash
 go run *.go
 ```
 

docs/docs/09-developer-tools/02-ide-support.md

@@ -355,7 +355,7 @@ Templ support requires the [tree-sitter parser for Templ](https://github.com/vri
 
 ### Check that go, gopls and templ are installed and are present in the path
 
-```shell
+```bash
 which go gopls templ
 ```
 

docs/docs/09-developer-tools/03-live-reload.md

@@ -88,13 +88,13 @@ sequenceDiagram
 
 If you want to trigger a live reload from outside `templ generate --watch` (e.g. if you're using `air`, `wgo` or another tool to build, but you want to use the templ live reload proxy), you can use the `--notify-proxy` argument.
 
-```shell
+```bash
 templ generate --notify-proxy
 ```
 
 This will default to the default templ proxy address of `localhost:7331`, but can be changed with the `--proxybind` and `--proxyport` arguments.
 
-```shell
+```bash
 templ generate --notify-proxy --proxybind="localhost" --proxyport="8080"
 ```
 

docs/docs/09-developer-tools/04-live-reload-with-other-tools.md

@@ -39,7 +39,7 @@ A `Makefile` can be used to run all of the necessary commands in parallel. This
 
 To start the `templ` proxy server in watch mode, run:
 
-```shell
+```bash
 templ generate --watch --proxy="http://localhost:8080" --open-browser=false
 ```
 
@@ -49,7 +49,7 @@ This assumes that your http server is running on `http://localhost:8080`. `--ope
 
 Tailwind requires a `tailwind.config.js` file at the root of your project, alongside an `input.css` file.
 
-```shell
+```bash
 npx --yes tailwindcss -i ./input.css -o ./assets/styles.css --minify --watch
 ```
 
@@ -59,7 +59,7 @@ This will watch `input.css` as well as your `.templ` files and re-generate `asse
 
 To bundle JavaScript, TypeScript, JSX, or TSX files, you can use `esbuild`:
 
-```shell
+```bash
 npx --yes esbuild js/index.ts --bundle --outdir=assets/ --watch
 ```
 
@@ -69,7 +69,7 @@ This will watch `js/index.ts` and relevant files, and re-generate `assets/index.
 
 To watch and restart your Go server, when only the `go` files change you can use `air`:
 
-```shell
+```bash
 go run github.com/cosmtrek/[email protected] \
   --build.cmd "go build -o tmp/bin/main" --build.bin "tmp/bin/main" --build.delay "100" \
   --build.exclude_dir "node_modules" \
@@ -96,7 +96,7 @@ We also want the browser to automatically reload when the:
 
 To trigger the event, we can use the `air` command to use a different set of options, using the `templ` CLI to send a reload event to the browser.
 
-```shell
+```bash
 go run github.com/cosmtrek/[email protected] \
   --build.cmd "templ generate --notify-proxy" \
   --build.bin "true" \

docs/docusaurus.config.js

@@ -89,6 +89,7 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
+        additionalLanguages: ['nix', 'bash', 'json'],
       },
       algolia: {
         appId: 'PVCVW9GL1Z',

docs/src/theme/prism-include-languages.js

@@ -25,7 +25,7 @@ export default function prismIncludeLanguages(PrismObject) {
 
     var space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
     var braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
-    var spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
+    var spread = /(?:\{<S>*\.{3}(?:(?!\{)[^{}]|<BRACES>)*\})/.source;
 
     /**
      * @param {string} source