[demo] Adds ScrollyCode base

[rachfop]

These steps are all ready implemented. Documenting if you want to work in a seperate branch or repo

Run Scrolly Code

Change directories into website dir.

cd websites/docs.temporal.io/

Install code-hike:

npm install @code-hike/mdx

Open docusaurs.config.js

Add the following:

const { remarkCodeHike } = require("@code-hike/mdx");

Add the following in docusaurs.config.js:

// look for this
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
		// … Add this plugin
          beforeDefaultRemarkPlugins: [[remarkCodeHike, { theme: "nord" }]],

Replace this:



        theme: {
          customCss: require.resolve("./src/css/custom.css"),
        },

With this:

        theme: {
          customCss: [require.resolve("@code-hike/mdx/styles.css"), require.resolve("./src/css/custom.css")],
        },

Run yarn

Scrolly Code example

<CH.Scrollycoding>

## Step 1

Words

/```
code block
/```

---

## Step 2

New Words


/```js app.js focus=11:17
code block
/```

---

## Step 3

New Words again ...

/```py main.py focus=1
code block
/```


</CH.Scrollycoding>