feat: scroll to highlighted lines in code blocks (#201)

* add custom js

* test with ald

* add custom js

* add highlights to pre-recorded audio

* add highlight to transcript-status/php

* add highlight to select-speech-model/python

* add highlights to select-speech-model

* add highlight to select-language/c#

* add highlights to speaker labels

* more highlighting fixes

* fix: add missing highlights in some code snippets

* fix: minor adjustment to detecting low confidence words cookbook which was adjusted in cookbook repo

---------

Co-authored-by: Amanda DiNoto <[email protected]>

Author: m-ods

cookbook-master/core-transcription/detecting-low-confidence-words.md

@@ -23,7 +23,7 @@ const client = new AssemblyAI({
 Next create the transcript with your audio file, either via local audio file or URL (AssemblyAI's servers need to be able to access the URL, make sure the URL links to a downloadable file).
 
 ```javascript
-const transcript = await client.transcripts.create({
+const transcript = await client.transcripts.transcribe({
   audio_url: './sample.mp4',
 })
 ```

fern/docs.yml

@@ -8,6 +8,8 @@ js:
     strategy: beforeInteractive
   - path: ./pre-recorded-audio-redirect.js
     strategy: beforeInteractive
+  - path: ./scroll-highlighted-lines.js
+    strategy: afterInteractive
 announcement:
   message: '🗝️ Multiple API keys and Projects are now available 🎉 (<a href="/docs/deployment/account-management" target="_blank" style="color: white;">Learn more</a>)'
 title: AssemblyAI | Documentation

fern/pages/02-speech-to-text/pre-recorded-audio/automatic-language-detection.mdx

@@ -8,7 +8,7 @@ To reliably identify the dominant language, the file must contain **at least 50
 
 <CodeBlocks>
 
-```python title="Python SDK"
+```python title="Python SDK" highlight={8,13} maxLines=15
 import assemblyai as aai
 
 aai.settings.api_key = "<YOUR_API_KEY>"
@@ -24,7 +24,7 @@ print(transcript.text)
 print(transcript.json_response["language_code"])
 ```
 
-```python title="Python"
+```python title="Python" highlight={19} maxLines=15
 import requests
 import time
 
@@ -69,7 +69,7 @@ while True:
 
 ```
 
-```ts title="TypeScript SDK"
+```ts title="TypeScript SDK" highlight={13} maxLines=15
 import { AssemblyAI } from 'assemblyai'
 
 const client = new AssemblyAI({
@@ -95,7 +95,7 @@ const run = async () => {
 run()
 ```
 
-```ts title="TypeScript"
+```ts title="TypeScript" highlight={19} maxLines=15
 import axios from 'axios'
 import fs from 'fs-extra'
 
@@ -142,7 +142,7 @@ while (true) {
 
 ```
 
-```csharp title="C#"
+```csharp title="C#" highlight={39}  maxLines=15
 using System;
 using System.IO;
 using System.Net.Http;
@@ -229,7 +229,7 @@ using (var httpClient = new HttpClient())
 }
 ```
 
-```ruby title="Ruby"
+```ruby title="Ruby" highlight={23} maxLines=15
 require 'net/http'
 require 'json'
 
@@ -295,7 +295,7 @@ while true
 end
 ```
 
-```php title="PHP"
+```php title="PHP" highlight={30} maxLines=15
 <?php
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
@@ -380,7 +380,7 @@ If language detection is enabled, the API returns a confidence score for the det
 
 <CodeBlocks>
 
-```python title="Python SDK"
+```python title="Python SDK" highlight={8,13} maxLines=15
 import assemblyai as aai
 
 aai.settings.api_key = "<YOUR_API_KEY>"
@@ -396,7 +396,7 @@ print(transcript.text)
 print(transcript.json_response["language_confidence"])
 ```
 
-```python title="Python"
+```python title="Python" highlight={33} maxLines=15
 import requests
 import time
 
@@ -441,7 +441,7 @@ while True:
 
 ```
 
-```ts title="TypeScript SDK"
+```ts title="TypeScript SDK" highlight={20} maxLines=15
 import { AssemblyAI } from 'assemblyai'
 
 const client = new AssemblyAI({
@@ -467,7 +467,7 @@ const run = async () => {
 run()
 ```
 
-```ts title="TypeScript"
+```ts title="TypeScript" highlight={36} maxLines=15
 import axios from 'axios'
 import fs from 'fs-extra'
 
@@ -514,7 +514,7 @@ while (true) {
 
 ```
 
-```csharp title="C#"
+```csharp title="C#" highlight={83} maxLines=15
 using System;
 using System.IO;
 using System.Net.Http;
@@ -601,7 +601,7 @@ using (var httpClient = new HttpClient())
 }
 ```
 
-```ruby title="Ruby"
+```ruby title="Ruby" highlight={55} maxLines=15
 require 'net/http'
 require 'json'
 
@@ -667,7 +667,7 @@ while true
 end
 ```
 
-```php title="PHP"
+```php title="PHP" highlight={62} maxLines=15
 <?php
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
@@ -749,7 +749,7 @@ if the language confidence is below this threshold. Valid values are in the rang
 
 <CodeBlocks>
 
-```python title="Python SDK"
+```python title="Python SDK" highlight={8,13} maxLines=15
 import assemblyai as aai
 
 aai.settings.api_key = "<YOUR_API_KEY>"
@@ -763,11 +763,9 @@ transcript = aai.Transcriber(config=config).transcribe(audio_file)
 
 if transcript.status == "error":
   raise RuntimeError(f"Transcription failed: {transcript.error}")
-
-print(transcript.text)
 ```
 
-```python title="Python"
+```python title="Python" highlight={20} maxLines=15
 import requests
 import time
 
@@ -812,7 +810,7 @@ while True:
 
 ```
 
-```ts title="TypeScript SDK"
+```ts title="TypeScript SDK" highlight={14} maxLines=15
 import { AssemblyAI } from 'assemblyai'
 
 const client = new AssemblyAI({
@@ -843,7 +841,7 @@ const run = async () => {
 run()
 ```
 
-```ts title="TypeScript"
+```ts title="TypeScript" highlight={20} maxLines=15
 import axios from 'axios'
 import fs from 'fs-extra'
 
@@ -891,7 +889,7 @@ while (true) {
 
 ```
 
-```csharp title="C#"
+```csharp title="C#" highlight={39} maxLines=15
 using System;
 using System.IO;
 using System.Net.Http;
@@ -978,7 +976,7 @@ using (var httpClient = new HttpClient())
 }
 ```
 
-```ruby title="Ruby"
+```ruby title="Ruby" highlight={24} maxLines=15
 require 'net/http'
 require 'json'
 
@@ -1045,7 +1043,7 @@ while true
 end
 ```
 
-```php title="PHP"
+```php title="PHP" highlight={31} maxLines=15
 <?php
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

fern/pages/02-speech-to-text/pre-recorded-audio/automatic-punctuation-and-casing.mdx

@@ -8,7 +8,7 @@ You can disable this behavior by setting `punctuate` and `format_text` to `False
 
 <Tabs>
   <Tab language="python-sdk" title="Python SDK" default>
-```python
+```python highlight={8} maxLines=15
 import assemblyai as aai
 
 aai.settings.api_key = "<YOUR_API_KEY>"
@@ -27,7 +27,7 @@ print(transcript.text)
 ```
   </Tab>
   <Tab language="python" title="Python">
-```python
+```python highlight={19-20} maxLines=15
 import requests
 import time
 
@@ -72,7 +72,7 @@ while True:
 ```
   </Tab>
   <Tab language="typescript-sdk" title="TypeScript SDK" default>
-```ts
+```ts highlight={13-14} maxLines=15
 import { AssemblyAI } from 'assemblyai'
 
 const client = new AssemblyAI({
@@ -99,7 +99,7 @@ run()
 ```
   </Tab>
   <Tab language="typescript" title="TypeScript">
-```ts
+```ts highlight={19-20} maxLines=15
 import axios from 'axios'
 import fs from 'fs-extra'
 
@@ -147,7 +147,7 @@ while (true) {
 ```
   </Tab>
   <Tab language="csharp" title="C#">
-```csharp
+```csharp highlight={37} maxLines=15
 using System;
 using System.IO;
 using System.Net.Http;
@@ -233,7 +233,7 @@ using (var httpClient = new HttpClient())
 ```
   </Tab>
   <Tab language="ruby" title="Ruby">
-```ruby
+```ruby highlight={23-24} maxLines=15
 require 'net/http'
 require 'json'
 
@@ -300,7 +300,7 @@ end
 ```
   </Tab>
   <Tab language="php" title="PHP">
-```php
+```php highlight={30-31} maxLines=15
 <?php
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

fern/pages/02-speech-to-text/pre-recorded-audio/custom-spelling.mdx

@@ -8,7 +8,7 @@ Custom Spelling lets you customize how words are spelled or formatted in the tra
   <Tab language="python-sdk" title="Python SDK" default>
 To use Custom Spelling, pass a dictionary to `set_custom_spelling()` on the transcription config. Each key-value pair specifies a mapping from a word or phrase to a new spelling or format. The key specifies the new spelling or format, and the corresponding value is the word or phrase you want to replace.
 
-```python
+```python highlight={9-14} maxLines=15
 import assemblyai as aai
 
 aai.settings.api_key = "<YOUR_API_KEY>"
@@ -36,7 +36,7 @@ print(transcript.text)
   <Tab language="python" title="Python">
 To use Custom Spelling, include `custom_spelling` in your transcription parameters. The parameter should be a list of dictionaries, with each dictionary specifying a mapping from a word or phrase to a new spelling or format.
 
-```python
+```python highlight={19-28} maxLines=15
 import requests
 import time
 
@@ -91,7 +91,7 @@ while True:
   <Tab language="typescript-sdk" title="TypeScript SDK" default>
 To use Custom Spelling, include `custom_spelling` in your transcription parameters. The parameter should be an array of objects, with each object specifying a mapping from a word or phrase to a new spelling or format.
 
-```ts
+```ts highlight={13-22} maxLines=15
 import { AssemblyAI } from 'assemblyai'
 
 const client = new AssemblyAI({
@@ -128,7 +128,7 @@ run()
   </Tab>
   <Tab language="typescript" title="TypeScript">
   To use Custom Spelling, include `custom_spelling` in your transcription parameters. The parameter should be an array of objects, with each object specifying a mapping from a word or phrase to a new spelling or format.
-```ts
+```ts highlight={19-28} maxLines=15
 import axios from 'axios'
 import fs from 'fs-extra'
 
@@ -186,7 +186,7 @@ while (true) {
   </Tab>
   <Tab language="csharp" title="C#">
   To use Custom Spelling, include `custom_spelling` in your transcription request. The parameter should be an array of objects, with each object specifying a mapping from a word or phrase to a new spelling or format.
-```csharp
+```csharp highlight={37-46} maxLines=15
 using System;
 using System.IO;
 using System.Net.Http;
@@ -282,7 +282,7 @@ using (var httpClient = new HttpClient())
   </Tab>
   <Tab language="ruby" title="Ruby">
   To use Custom Spelling, include `custom_spelling` in your transcription parameters. The parameter should be an array of hashes, with each hash specifying a mapping from a word or phrase to a new spelling or format.
-```ruby
+```ruby highlight={23-32} maxLines=15
 require 'net/http'
 require 'json'
 
@@ -358,7 +358,7 @@ end
   </Tab>
   <Tab language="php" title="PHP">
   To use Custom Spelling, include `custom_spelling` in your transcription parameters. The parameter should be an array of arrays, with each inner array specifying a mapping from a word or phrase to a new spelling or format.
-```php
+```php highlight={30-39} maxLines=15
 <?php
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

fern/pages/02-speech-to-text/pre-recorded-audio/custom-vocabulary.mdx

@@ -14,7 +14,7 @@ You can also control how much weight to apply to each keyword or phrase. Include
 
 <CodeBlocks>
 
-```python title="Python SDK"
+```python title="Python SDK" highlight={9-10} maxLines=15
 import assemblyai as aai
 
 aai.settings.api_key = "<YOUR_API_KEY>"
@@ -35,7 +35,7 @@ if transcript.status == "error":
 print(transcript.text)
 ```
 
-```python title="Python"
+```python title="Python" highlight={19,20} maxLines=15
 import requests
 import time
 
@@ -79,7 +79,7 @@ while True:
 
 ```
 
-```ts title="TypeScript SDK"
+```ts title="TypeScript SDK" highlight={13-14} maxLines=15
 import { AssemblyAI } from 'assemblyai'
 
 const client = new AssemblyAI({
@@ -105,7 +105,7 @@ const run = async () => {
 run()
 ```
 
-```ts title="TypeScript"
+```ts title="TypeScript" highlight={19-20} maxLines=15
 import axios from 'axios'
 import fs from 'fs-extra'
 
@@ -152,7 +152,7 @@ while (true) {
 
 ```
 
-```csharp title="C#"
+```csharp title="C#" highlight={37} maxLines=15
 using System;
 using System.IO;
 using System.Net.Http;
@@ -236,7 +236,7 @@ using (var httpClient = new HttpClient())
 }
 ```
 
-```ruby title="Ruby"
+```ruby title="Ruby" highlight={23-24} maxLines=15
 require 'net/http'
 require 'json'
 
@@ -302,7 +302,7 @@ while true
 end
 ```
 
-```php title="PHP"
+```php title="PHP" highlight={30-31} maxLines=15
 <?php
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);