docs: add highlight magic comments (#22367)

docs/docs/configuration/authentication.md

@@ -232,7 +232,7 @@ The viewer role provides read-only access to all cameras in the UI and API. Cust
 
 ### Role Configuration Example
 
-```yaml
+```yaml {11-16}
 cameras:
   front_door:
     # ... camera config

docs/docs/configuration/birdseye.md

@@ -24,7 +24,7 @@ A custom icon can be added to the birdseye background by providing a 180x180 ima
 
 If you want to include a camera in Birdseye view only for specific circumstances, or just don't include it at all, the Birdseye setting can be set at the camera level.
 
-```yaml
+```yaml {8-10,12-14}
 # Include all cameras by default in Birdseye view
 birdseye:
   enabled: True
@@ -48,6 +48,7 @@ By default birdseye shows all cameras that have had the configured activity in t
 ```yaml
 birdseye:
   enabled: True
+  # highlight-next-line
   inactivity_threshold: 15
 ```
 
@@ -78,9 +79,11 @@ birdseye:
 cameras:
   front:
     birdseye:
+      # highlight-next-line
       order: 1
   back:
     birdseye:
+      # highlight-next-line
       order: 2
 ```
 
@@ -92,7 +95,7 @@ It is possible to limit the number of cameras shown on birdseye at one time. Whe
 
 For example, this can be configured to only show the most recently active camera.
 
-```yaml
+```yaml {3-4}
 birdseye:
   enabled: True
   layout:
@@ -103,7 +106,7 @@ birdseye:
 
 By default birdseye tries to fit 2 cameras in each row and then double in size until a suitable layout is found. The scaling can be configured with a value between 1.0 and 5.0 depending on use case.
 
-```yaml
+```yaml {3-4}
 birdseye:
   enabled: True
   layout:

docs/docs/configuration/camera_specific.md

@@ -23,6 +23,7 @@ Some cameras support h265 with different formats, but Safari only supports the a
 cameras:
   h265_cam: # <------ Doesn't matter what the camera is called
     ffmpeg:
+      # highlight-next-line
       apple_compatibility: true # <- Adds compatibility with MacOS and iPhone
 ```
 
@@ -30,7 +31,7 @@ cameras:
 
 Note that mjpeg cameras require encoding the video into h264 for recording, and restream roles. This will use significantly more CPU than if the cameras supported h264 feeds directly. It is recommended to use the restream role to create an h264 restream and then use that as the source for ffmpeg.
 
-```yaml
+```yaml {3,10}
 go2rtc:
   streams:
     mjpeg_cam: "ffmpeg:http://your_mjpeg_stream_url#video=h264#hardware" # <- use hardware acceleration to create an h264 stream usable for other components.
@@ -96,6 +97,7 @@ This camera is H.265 only. To be able to play clips on some devices (like MacOs
 cameras:
   annkec800: # <------ Name the camera
     ffmpeg:
+      # highlight-next-line
       apple_compatibility: true # <- Adds compatibility with MacOS and iPhone
       output_args:
         record: preset-record-generic-audio-aac
@@ -274,7 +276,7 @@ To use a USB camera (webcam) with Frigate, the recommendation is to use go2rtc's
 
 - In your Frigate Configuration File, add the go2rtc stream and roles as appropriate:
 
-```
+```yaml {4,11-12}
 go2rtc:
   streams:
     usb_camera:

docs/docs/configuration/cameras.md

@@ -66,7 +66,7 @@ Not every PTZ supports ONVIF, which is the standard protocol Frigate uses to com
 
 Add the onvif section to your camera in your configuration file:
 
-```yaml
+```yaml {4-8}
 cameras:
   back:
     ffmpeg: ...

docs/docs/configuration/custom_classification/object_classification.md

@@ -118,6 +118,7 @@ Enable debug logs for classification models by adding `frigate.data_processing.r
 logger:
   default: info
   logs:
+    # highlight-next-line
     frigate.data_processing.real_time.custom_classification: debug
 ```
 

docs/docs/configuration/custom_classification/state_classification.md

@@ -85,6 +85,7 @@ Enable debug logs for classification models by adding `frigate.data_processing.r
 logger:
   default: info
   logs:
+    # highlight-next-line
     frigate.data_processing.real_time.custom_classification: debug
 ```
 

docs/docs/configuration/genai/config.md

@@ -109,7 +109,7 @@ genai:
 
 To use a different Gemini-compatible API endpoint, set the `provider_options` with the `base_url` key to your provider's API URL. For example:
 
-```
+```yaml {4,5}
 genai:
   provider: gemini
   ...
@@ -152,7 +152,7 @@ To use a different OpenAI-compatible API endpoint, set the `OPENAI_BASE_URL` env
 
 For OpenAI-compatible servers (such as llama.cpp) that don't expose the configured context size in the API response, you can manually specify the context size in `provider_options`:
 
-```yaml
+```yaml {5,6}
 genai:
   provider: openai
   base_url: http://your-llama-server

docs/docs/configuration/genai/review_summaries.md

@@ -80,6 +80,7 @@ By default, review summaries use preview images (cached preview frames) which ha
 review:
   genai:
     enabled: true
+    # highlight-next-line
     image_source: recordings # Options: "preview" (default) or "recordings"
 ```
 
@@ -104,7 +105,7 @@ If recordings are not available for a given time period, the system will automat
 
 Along with the concern of suspicious activity or immediate threat, you may have concerns such as animals in your garden or a gate being left open. These concerns can be configured so that the review summaries will make note of them if the activity requires additional review. For example:
 
-```yaml
+```yaml {4,5}
 review:
   genai:
     enabled: true
@@ -116,7 +117,7 @@ review:
 
 By default, review summaries are generated in English. You can configure Frigate to generate summaries in your preferred language by setting the `preferred_language` option:
 
-```yaml
+```yaml {4}
 review:
   genai:
     enabled: true

docs/docs/configuration/hardware_acceleration_video.md

@@ -117,12 +117,13 @@ services:
   frigate:
     ...
     image: ghcr.io/blakeblackshear/frigate:stable
+    # highlight-next-line
     privileged: true
 ```
 
 ##### Docker Run CLI - Privileged
 
-```bash
+```bash {4}
 docker run -d \
   --name frigate \
   ...
@@ -136,7 +137,7 @@ Only recent versions of Docker support the `CAP_PERFMON` capability. You can tes
 
 ##### Docker Compose - CAP_PERFMON
 
-```yaml
+```yaml {5,6}
 services:
   frigate:
     ...
@@ -147,7 +148,7 @@ services:
 
 ##### Docker Run CLI - CAP_PERFMON
 
-```bash
+```bash {4}
 docker run -d \
   --name frigate \
   ...
@@ -214,7 +215,7 @@ Additional configuration is needed for the Docker container to be able to access
 
 #### Docker Compose - Nvidia GPU
 
-```yaml
+```yaml {5-12}
 services:
   frigate:
     ...
@@ -231,7 +232,7 @@ services:
 
 #### Docker Run CLI - Nvidia GPU
 
-```bash
+```bash {4}
 docker run -d \
   --name frigate \
   ...
@@ -310,7 +311,7 @@ ffmpeg:
 If running Frigate through Docker, you either need to run in privileged mode or
 map the `/dev/video*` devices to Frigate. With Docker Compose add:
 
-```yaml
+```yaml {4-5}
 services:
   frigate:
     ...
@@ -320,7 +321,7 @@ services:
 
 Or with `docker run`:
 
-```bash
+```bash {4}
 docker run -d \
   --name frigate \
   ...
@@ -352,7 +353,7 @@ You will need to use the image with the nvidia container runtime:
 
 ### Docker Run CLI - Jetson
 
-```bash
+```bash {3}
 docker run -d \
   ...
   --runtime nvidia
@@ -361,7 +362,7 @@ docker run -d \
 
 ### Docker Compose - Jetson
 
-```yaml
+```yaml {5}
 services:
   frigate:
     ...
@@ -452,14 +453,14 @@ Restarting ffmpeg...
 
 you should try to uprade to FFmpeg 7. This can be done using this config option:
 
-```
+```yaml
 ffmpeg:
   path: "7.0"
 ```
 
 You can set this option globally to use FFmpeg 7 for all cameras or on camera level to use it only for specific cameras. Do not confuse this option with:
 
-```
+```yaml
 cameras:
   name:
     ffmpeg:
@@ -481,7 +482,7 @@ Make sure to follow the [Synaptics specific installation instructions](/frigate/
 
 Add one of the following FFmpeg presets to your `config.yml` to enable hardware video processing:
 
-```yaml
+```yaml {2}
 ffmpeg:
   hwaccel_args: -c:v h264_v4l2m2m
   input_args: preset-rtsp-restream

docs/docs/configuration/license_plate_recognition.md

@@ -43,7 +43,7 @@ lpr:
 
 Like other enrichments in Frigate, LPR **must be enabled globally** to use the feature. You should disable it for specific cameras at the camera level if you don't want to run LPR on cars on those cameras:
 
-```yaml
+```yaml {4,5}
 cameras:
   garage:
     ...
@@ -391,6 +391,7 @@ Start with ["Why isn't my license plate being detected and recognized?"](#why-is
      logger:
        default: info
        logs:
+        # highlight-next-line
          frigate.data_processing.common.license_plate: debug
      ```
 

docs/docs/configuration/live.md

@@ -77,7 +77,7 @@ Configure the `streams` option with a "friendly name" for your stream followed b
 
 Using Frigate's internal version of go2rtc is required to use this feature. You cannot specify paths in the `streams` configuration, only go2rtc stream names.
 
-```yaml
+```yaml {3,6,8,25-29}
 go2rtc:
   streams:
     test_cam:
@@ -116,7 +116,7 @@ WebRTC works by creating a TCP or UDP connection on port `8555`. However, it req
 - For external access, over the internet, setup your router to forward port `8555` to port `8555` on the Frigate device, for both TCP and UDP.
 - For internal/local access, unless you are running through the HA App, you will also need to set the WebRTC candidates list in the go2rtc config. For example, if `192.168.1.10` is the local IP of the device running Frigate:
 
-  ```yaml title="config.yml"
+  ```yaml title="config.yml" {4-7}
   go2rtc:
     streams:
       test_cam: ...
@@ -154,7 +154,7 @@ If not running in host mode, port 8555 will need to be mapped for the container:
 
 docker-compose.yml
 
-```yaml
+```yaml {4-6}
 services:
   frigate:
     ...

docs/docs/configuration/object_detectors.md

@@ -572,7 +572,7 @@ $ docker run --device=/dev/kfd --device=/dev/dri  \
 
 When using Docker Compose:
 
-```yaml
+```yaml {4-6}
 services:
   frigate:
     ...
@@ -603,7 +603,7 @@ $ docker run -e HSA_OVERRIDE_GFX_VERSION=10.0.0 \
 
 When using Docker Compose:
 
-```yaml
+```yaml {4-5}
 services:
   frigate:
     ...

docs/docs/configuration/record.md

@@ -130,7 +130,7 @@ When exporting a time-lapse the default speed-up is 25x with 30 FPS. This means
 
 To configure the speed-up factor, the frame rate and further custom settings, the configuration parameter `timelapse_args` can be used. The below configuration example would change the time-lapse speed to 60x (for fitting 1 hour of recording into 1 minute of time-lapse) with 25 FPS:
 
-```yaml
+```yaml {3-4}
 record:
   enabled: True
   export:

docs/docs/configuration/restream.md

@@ -34,7 +34,7 @@ To improve connection speed when using Birdseye via restream you can enable a sm
 
 The go2rtc restream can be secured with RTSP based username / password authentication. Ex:
 
-```yaml
+```yaml {2-4}
 go2rtc:
   rtsp:
     username: "admin"
@@ -147,6 +147,7 @@ For example:
 ```yaml
 go2rtc:
   streams:
+    # highlight-error-line
     my_camera: rtsp://username:$@foo%@192.168.1.100
 ```
 
@@ -155,6 +156,7 @@ becomes
 ```yaml
 go2rtc:
   streams:
+    # highlight-next-line
     my_camera: rtsp://username:$%40foo%25@192.168.1.100
 ```
 

docs/docs/configuration/review.md

@@ -71,7 +71,7 @@ To exclude a specific camera from alerts or detections, simply provide an empty
 
 For example, to exclude objects on the camera _gatecamera_ from any detections, include this in your config:
 
-```yaml
+```yaml {3-5}
 cameras:
   gatecamera:
     review:

docs/docs/configuration/tls.md

@@ -20,7 +20,7 @@ tls:
 
 TLS certificates can be mounted at `/etc/letsencrypt/live/frigate` using a bind mount or docker volume.
 
-```yaml
+```yaml {3-4}
 frigate:
   ...
   volumes:
@@ -32,7 +32,7 @@ Within the folder, the private key is expected to be named `privkey.pem` and the
 
 Note that certbot uses symlinks, and those can't be followed by the container unless it has access to the targets as well, so if using certbot you'll also have to mount the `archive` folder for your domain, e.g.:
 
-```yaml
+```yaml {3-5}
 frigate:
   ...
   volumes:
@@ -46,7 +46,7 @@ Frigate automatically compares the fingerprint of the certificate at `/etc/letse
 
 If you issue Frigate valid certificates you will likely want to configure it to run on port 443 so you can access it without a port number like `https://your-frigate-domain.com` by mapping 8971 to 443.
 
-```yaml
+```yaml {3-4}
 frigate:
   ...
   ports:

docs/docs/configuration/zones.md

@@ -18,7 +18,7 @@ To create a zone, follow [the steps for a "Motion mask"](masks.md), but use the
 
 Often you will only want alerts to be created when an object enters areas of interest. This is done using zones along with setting required_zones. Let's say you only want to have an alert created when an object enters your entire_yard zone, the config would be:
 
-```yaml
+```yaml {6,8}
 cameras:
   name_of_your_camera:
     review:
@@ -104,6 +104,7 @@ cameras:
   name_of_your_camera:
     zones:
       sidewalk:
+        # highlight-next-line
         loitering_time: 4 # unit is in seconds
         objects:
           - person
@@ -118,6 +119,7 @@ cameras:
   name_of_your_camera:
     zones:
       front_yard:
+        # highlight-next-line
         inertia: 3
         objects:
           - person
@@ -130,6 +132,7 @@ cameras:
   name_of_your_camera:
     zones:
       driveway_entrance:
+        # highlight-next-line
         inertia: 1
         objects:
           - car
@@ -192,5 +195,6 @@ cameras:
         coordinates: ...
         distances: ...
         inertia: 1
+        # highlight-next-line
         speed_threshold: 20 # unit is in kph or mph, depending on how unit_system is set (see above)
 ```

docs/docs/guides/getting_started.md

@@ -150,7 +150,7 @@ Here is an example configuration with hardware acceleration configured to work w
 
 `docker-compose.yml` (after modifying, you will need to run `docker compose up -d` to apply changes)
 
-```yaml
+```yaml {4,5}
 services:
   frigate:
     ...
@@ -168,6 +168,7 @@ cameras:
   name_of_your_camera:
     ffmpeg:
       inputs: ...
+      # highlight-next-line
       hwaccel_args: preset-vaapi
     detect: ...
 ```
@@ -183,7 +184,7 @@ In many cases, the integrated graphics on Intel CPUs provides sufficient perform
 
 You need to refer to **Configure hardware acceleration** above to enable the container to use the GPU.
 
-```yaml
+```yaml {3-6,9-15,20-21}
 mqtt: ...
 
 detectors: # <---- add detectors
@@ -217,7 +218,7 @@ If you have a USB Coral, you will need to add a detectors section to your config
 
 `docker-compose.yml` (after modifying, you will need to run `docker compose up -d` to apply changes)
 
-```yaml
+```yaml {4-6}
 services:
   frigate:
     ...
@@ -227,7 +228,7 @@ services:
     ...
 ```
 
-```yaml
+```yaml {3-6,11-12}
 mqtt: ...
 
 detectors: # <---- add detectors
@@ -263,7 +264,7 @@ Note that motion masks should not be used to mark out areas where you do not wan
 
 Your configuration should look similar to this now.
 
-```yaml
+```yaml {16-18}
 mqtt:
   enabled: False
 
@@ -290,7 +291,7 @@ In order to review activity in the Frigate UI, recordings need to be enabled.
 
 To enable recording video, add the `record` role to a stream and enable it in the config. If record is disabled in the config, it won't be possible to enable it in the UI.
 
-```yaml
+```yaml {16-17}
 mqtt: ...
 
 detectors: ...

docs/docusaurus.config.ts

@@ -83,6 +83,17 @@ const config: Config = {
       },
     },
     prism: {
+      magicComments:[
+        {
+          className: 'theme-code-block-highlighted-line',
+          line: 'highlight-next-line',
+          block: {start: 'highlight-start', end: 'highlight-end'},
+        },
+        {
+          className: 'code-block-error-line',
+          line: 'highlight-error-line',
+        },
+      ],
       additionalLanguages: ["bash", "json"],
     },
     languageTabs: [

docs/src/css/custom.css

@@ -234,3 +234,11 @@
   content: "schema";
   color: var(--ifm-color-secondary-contrast-foreground);
 }
+
+.code-block-error-line {
+  background-color: #ff000020;
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid #ff000080;
+}