Demo

This page contains various diff code blocks gathered from the Astro and Starlight documentations to compare the differences between the classic diff syntax and the one used with the remark-auto-diff plugin.

package.json example

Classic diff

Markdown Code Editor

```diff title="package.json"
{
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
  }
}
```

Preview

package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

remark-auto-diff

Markdown Code Editor

```json auto-diff title="package.json"
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
```

```json auto-diff
{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}
```

Preview

package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

astro.config.mjs example

Classic diff

Markdown Code Editor

```diff
// astro.config.mjs
import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
-      customCss: [],
+      customCss: [
+        // Relative path to your custom CSS file
+        './src/styles/custom.css',
+      ],
    }),
  ],
})
```

Preview

astro.config.mjs

import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [],
      customCss: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
})

remark-auto-diff

Markdown Code Editor

```js auto-diff
// astro.config.mjs
import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [],
    }),
  ],
})
```

```js auto-diff
// astro.config.mjs
import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
})
```

Preview

astro.config.mjs

import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [],
      customCss: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
})