docs: fix example not following best practice and relation tuple synt…

…ax highlighting

closes #561
Syntax highlighting broke because docusaurus updated prism and that resulted in FormidableLabs/prism-react-renderer#100 being propagated which in turn removed some of the token classes we used. Added a custom theme to avoid that in the future.

docs/docs/concepts/graph-of-relations.mdx

@@ -35,7 +35,7 @@ readability. In practice, the namespace always has to be considered.
 // user1 has access on dir1
 dir1#access@user1
 // Have a look on the subjects concept page if you don't know the empty relation.
-dir1#parent@(file1#)
+dir1#child@(file1#)
 // Everyone with access to dir1 has access to file1. This would probably be defined
 // through a subject set rewrite that defines this inherited relation globally.
 // In this example, we define this tuple explicitly.
@@ -54,8 +54,8 @@ This is represented by the following graph:
   chart={`
 graph TD
     subgraph obj [Object region]
-    A[file1]
-    E[dir1] -->|parent| A
+    E[dir1]
+    A[file1] -->|child| E
     G[file2]
     end
     subgraph subjID [Subject ID region]

docs/docusaurus.config.js

@@ -40,6 +40,8 @@ if (fs.existsSync('./src/css/theme.css')) {
   customCss.push(require.resolve('./src/css/theme.css'))
 }
 
+const githubPrismTheme = require('prism-react-renderer/themes/github')
+
 module.exports = {
   title: config.projectName,
   tagline: config.projectTagLine,
@@ -52,7 +54,54 @@ module.exports = {
   projectName: config.projectSlug, // Usually your repo name.
   themeConfig: {
     prism: {
-      theme: require('prism-react-renderer/themes/github'),
+      theme: {
+        ...githubPrismTheme,
+        styles: [
+          ...githubPrismTheme.styles,
+          {
+            languages: ['keto-relation-tuples'],
+            types: ['namespace'],
+            style: {
+              color: '#666'
+            }
+          },
+          {
+            languages: ['keto-relation-tuples'],
+            types: ['object'],
+            style: {
+              color: '#939'
+            }
+          },
+          {
+            languages: ['keto-relation-tuples'],
+            types: ['relation'],
+            style: {
+              color: '#e80'
+            }
+          },
+          {
+            languages: ['keto-relation-tuples'],
+            types: ['delimiter'],
+            style: {
+              color: '#555'
+            }
+          },
+          {
+            languages: ['keto-relation-tuples'],
+            types: ['comment'],
+            style: {
+              color: '#999'
+            }
+          },
+          {
+            languages: ['keto-relation-tuples'],
+            types: ['subject'],
+            style: {
+              color: '#903'
+            }
+          }
+        ]
+      },
       darkTheme: require('prism-react-renderer/themes/dracula'),
       additionalLanguages: ['pug', 'shell-session']
     },