Add copy to clipboard in the markdown rendered content (#730)

* add lang for proper code highlighting

* feat: add override for markdown code blocks

* Removing dollar sign which shouldn't be there for copying

---------

Co-authored-by: Isabel Fenton <ifenton@turing.ac.uk>

Author: vimode

frontend/src/components/SingleView.tsx

@@ -114,6 +114,7 @@ load_pretrained_model("${url}")`}
                         </dt>
                         <CopyToClipboard
                           codeText={`pip install ${pkg_url}`}
+                          lang="language-bash"
                         />
                     </div>
                     {scivision_code}

frontend/src/pages/ScivisionPy/content.md

@@ -13,7 +13,7 @@ The full documentation is [here](https://scivision.readthedocs.io/en/latest/), a
 From a terminal, run
 
 ```bash
-$ pip install scivision
+pip install scivision
 ```
 
 ### Load a model

frontend/src/utils/ParseMarkdown.tsx

@@ -4,6 +4,21 @@ import ReactPlayer from 'react-player/youtube'
 import { PageTitle } from '@/components/Typography'
 import Markdown from 'markdown-to-jsx'
 import matter from 'gray-matter'
+import CopyToClipboard from '@/components/CopyToClipboard'
+
+type CodeAdapterProps = {
+    children?: string
+    className?: string
+}
+
+const CodeAdapter = ({ children, className, ...rest }: CodeAdapterProps) => {
+    const codeText = Array.isArray(children)
+        ? children.join('')
+        : String(children ?? '')
+    const lang = className || 'language-text'
+
+    return <CopyToClipboard codeText={codeText} lang={lang} {...rest} />
+}
 
 const ParseMarkdown = (props: { markdown: string }) => {
     const parsedMarkdown = matter(props.markdown)
@@ -17,6 +32,9 @@ const ParseMarkdown = (props: { markdown: string }) => {
                         overrides: {
                             Link,
                             ReactPlayer,
+                            code: {
+                                component: CodeAdapter,
+                            },
                         },
                     }}
                 >