fix: syntax highlighting

Author: jlp-craigmorten

docs/example.md

@@ -82,7 +82,7 @@ values={[
 }>
 <TabItem value="ts">
 
-```ts
+```ts title="./playwright.config.ts"
 import { screenReaderConfig } from "@guidepup/playwright";
 import { devices, PlaywrightTestConfig } from "@playwright/test";
 
@@ -105,7 +105,7 @@ export default config;
 </TabItem>
 <TabItem value="js">
 
-```js
+```js title="./playwright.config.js"
 const { screenReaderConfig } = require("@guidepup/playwright");
 const { devices } = require("@playwright/test");
 
@@ -148,7 +148,7 @@ values={[
 }>
 <TabItem value="ts">
 
-```ts
+```ts title="./voiceOver.spec.ts"
 import { voiceOverTest as test } from "@guidepup/playwright";
 import { expect } from "@playwright/test";
 
@@ -182,7 +182,7 @@ test.describe("Playwright VoiceOver", () => {
 </TabItem>
 <TabItem value="js">
 
-```js
+```js title="./voiceOver.spec.js"
 const { voiceOverTest as test } = require("@guidepup/playwright");
 const { expect } = require("@playwright/test");
 

docs/intro.md

@@ -34,6 +34,10 @@ For further information checkout this [guide to set up your environment](./guide
 
 Install Guidepup to your project:
 
+```bash
+yarn add @guidepup/guidepup
+```
+
 <Tabs
 groupId="pm-flavor"
 defaultValue="yarn"
@@ -76,7 +80,7 @@ values={[
 
 If you're using MacOS:
 
-```ts
+```ts title="./example.ts"
 import { voiceOver } from "@guidepup/guidepup";
 
 (async () => {
@@ -93,7 +97,7 @@ import { voiceOver } from "@guidepup/guidepup";
 
 Or if you're using Windows:
 
-```ts
+```ts title="./example.ts"
 import { nvda } from "@guidepup/guidepup";
 
 (async () => {
@@ -113,7 +117,7 @@ import { nvda } from "@guidepup/guidepup";
 
 If you're using MacOS:
 
-```js
+```js title="./example.js"
 const { voiceOver } = require("@guidepup/guidepup");
 
 (async () => {
@@ -130,7 +134,7 @@ const { voiceOver } = require("@guidepup/guidepup");
 
 Or if you're using Windows:
 
-```js
+```js title="./example.js"
 const { nvda } = require("@guidepup/guidepup");
 
 (async () => {

docs/virtual.md

@@ -74,7 +74,7 @@ values={[
 }>
 <TabItem value="ts">
 
-```ts
+```ts title="./example.test.ts"
 import { virtual } from "@guidepup/virtual-screen-reader";
 
 test("should navigate to the input and announce the placeholder", async () => {
@@ -105,7 +105,7 @@ test("should navigate to the input and announce the placeholder", async () => {
 </TabItem>
 <TabItem value="js">
 
-```js
+```js title="./example.test.js"
 const { virtual } = require("@guidepup/virtual-screen-reader");
 
 test("should navigate to the input and announce the placeholder", async () => {

docusaurus.config.js

@@ -1,6 +1,5 @@
 const { themes } = require("prism-react-renderer");
 const lightCodeTheme = themes.github;
-// const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 // Original: https://github.com/dracula/visual-studio-code
 const accessibleDarkTheme = {
@@ -203,6 +202,7 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Craig Morten.`,
       },
       prism: {
+        additionalLanguages: ["bash"],
         theme: lightCodeTheme,
         darkTheme: accessibleDarkTheme,
       },