Add titles to codeblocks and switch from diff codeblock to language codeblock

Signed-off-by: Paul Schultz <pschultz@pobox.com>

docs/features/kubernetes/installation.md

@@ -23,8 +23,8 @@ yarn add --cwd packages/app @backstage/plugin-kubernetes
 Once the package has been installed, you need to import the plugin in your app
 by adding the "Kubernetes" tab to the respective catalog pages.
 
-```tsx
-// In packages/app/src/components/catalog/EntityPage.tsx
+```tsx title="packages/app/src/components/catalog/EntityPage.tsx"
+/* highlight-add-next-line */
 import { EntityKubernetesContent } from '@backstage/plugin-kubernetes';
 
 // You can add the tab to any number of pages, the service page is shown as an
@@ -32,9 +32,13 @@ import { EntityKubernetesContent } from '@backstage/plugin-kubernetes';
 const serviceEntityPage = (
   <EntityLayout>
     {/* other tabs... */}
+    {/* highlight-add-start */}
     <EntityLayout.Route path="/kubernetes" title="Kubernetes">
       <EntityKubernetesContent refreshIntervalMs={30000} />
     </EntityLayout.Route>
+    {/* highlight-add-end */}
+  </EntityLayout>
+)
 ```
 
 **Notes:**
@@ -57,8 +61,7 @@ yarn add --cwd packages/backend @backstage/plugin-kubernetes-backend
 Create a file called `kubernetes.ts` inside `packages/backend/src/plugins/` and
 add the following:
 
-```typescript
-// In packages/backend/src/plugins/kubernetes.ts
+```ts title="packages/backend/src/plugins/kubernetes.ts"
 import { KubernetesBuilder } from '@backstage/plugin-kubernetes-backend';
 import { Router } from 'express';
 import { PluginEnvironment } from '../types';
@@ -81,14 +84,17 @@ And import the plugin to `packages/backend/src/index.ts`. There are three lines
 of code you'll need to add, and they should be added near similar code in your
 existing Backstage backend.
 
-```typescript
-// In packages/backend/src/index.ts
+```typescript title="packages/backend/src/index.ts"
+// ..
+/* highlight-add-next-line */
 import kubernetes from './plugins/kubernetes';
-// ...
+
 async function main() {
   // ...
+  /* highlight-add-next-line */
   const kubernetesEnv = useHotMemoize(module, () => createEnv('kubernetes'));
   // ...
+  /* highlight-add-next-line */
   apiRouter.use('/kubernetes', await kubernetes(kubernetesEnv));
 ```
 
@@ -104,52 +110,66 @@ don't work for your use-case, it is possible to implement a custom
 
 Change the following in `packages/backend/src/plugins/kubernetes.ts`:
 
-```diff
--import { KubernetesBuilder } from '@backstage/plugin-kubernetes-backend';
-+import {
-+  ClusterDetails,
-+  KubernetesBuilder,
-+  KubernetesClustersSupplier,
-+} from '@backstage/plugin-kubernetes-backend';
- import { Router } from 'express';
- import { PluginEnvironment } from '../types';
-+import { Duration } from 'luxon';
-+
-+export class CustomClustersSupplier implements KubernetesClustersSupplier {
-+  constructor(private clusterDetails: ClusterDetails[] = []) {}
-+
-+  static create(refreshInterval: Duration) {
-+    const clusterSupplier = new CustomClustersSupplier();
-+    // setup refresh, e.g. using a copy of https://github.com/backstage/backstage/blob/master/plugins/search-backend-node/src/runPeriodically.ts
-+    runPeriodically(
-+      () => clusterSupplier.refreshClusters(),
-+      refreshInterval.toMillis(),
-+    );
-+    return clusterSupplier;
-+  }
-+
-+  async refreshClusters(): Promise<void> {
-+    this.clusterDetails = []; // fetch from somewhere
-+  }
-+
-+  async getClusters(): Promise<ClusterDetails[]> {
-+    return this.clusterDetails;
-+  }
-+}
+```ts title="packages/backend/src/plugins/kubernetes.ts"
+import {
+ /* highlight-add-next-line */
+  ClusterDetails,
+  KubernetesBuilder,
+  /* highlight-add-next-line */
+  KubernetesClustersSupplier,
+} from '@backstage/plugin-kubernetes-backend';
+import { Router } from 'express';
+import { PluginEnvironment } from '../types';
+/* highlight-add-next-line */
+import { Duration } from 'luxon';
 
- export default async function createPlugin(
-   env: PluginEnvironment,
- ): Promise<Router> {
--  const { router } = await KubernetesBuilder.createBuilder({
-+  const builder = await KubernetesBuilder.createBuilder({
+/* highlight-add-start */
+export class CustomClustersSupplier implements KubernetesClustersSupplier {
+  constructor(private clusterDetails: ClusterDetails[] = []) {}
+
+  static create(refreshInterval: Duration) {
+    const clusterSupplier = new CustomClustersSupplier();
+    // setup refresh, e.g. using a copy of https://github.com/backstage/backstage/blob/master/plugins/search-backend-node/src/runPeriodically.ts
+    runPeriodically(
+      () => clusterSupplier.refreshClusters(),
+      refreshInterval.toMillis(),
+    );
+    return clusterSupplier;
+  }
+
+  async refreshClusters(): Promise<void> {
+    this.clusterDetails = []; // fetch from somewhere
+  }
+
+  async getClusters(): Promise<ClusterDetails[]> {
+    return this.clusterDetails;
+  }
+}
+/* highlight-add-end */
+
+export default async function createPlugin(
+  env: PluginEnvironment,
+): Promise<Router> {
+
+  /* highlight-remove-next-line */
+  const { router } = await KubernetesBuilder.createBuilder({
+  /* highlight-add-next-line */
+  const builder = await KubernetesBuilder.createBuilder({
      logger: env.logger,
      config: env.config,
--  }).build();
-+  });
-+  builder.setClusterSupplier(
-+    CustomClustersSupplier.create(Duration.fromObject({ minutes: 60 })),
-+  );
-+  const { router } = await builder.build();
+  /* highlight-remove-next-line */
+  }).build();
+  /* highlight-add-start */
+  });
+  builder.setClusterSupplier(
+    CustomClustersSupplier.create(Duration.fromObject({ minutes: 60 })),
+  );
+  const { router } = await builder.build();
+  /* highlight-add-end */
+
+  // ..
+  return router;
+}
 ```
 
 ## Running Backstage locally