github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/manual-grading/Comment.tsx (about)

     1  import React from "react"
     2  import ReactMarkdown from "react-markdown"
     3  import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
     4  import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
     5  import { CodeProps } from "react-markdown/lib/ast-to-react";
     6  
     7  
     8  const CriterionComment = ({ comment }: { comment: string }): JSX.Element | null => {
     9    if (comment == "" || comment.length == 0) {
    10      return null
    11    }
    12    return (
    13      <div className="comment-md">
    14        <ReactMarkdown
    15          // eslint-disable-next-line react/no-children-prop
    16          children={comment}
    17          components={{
    18            // eslint-disable-next-line @typescript-eslint/no-unused-vars
    19            code({ node, inline, className, children, ...props }: CodeProps) {
    20              // Code blocks are rendered with a className of "language-<language>".
    21              // For example, the following code block:
    22              //  ```go
    23              //       fmt.Println("Hello, world!")
    24              //  ```
    25              // will be rendered with a className of "language-go",
    26              // e.g.: <code className="language-go">...</code>
    27              // matchLanguage will try to match the language from the className.
    28              const matchLanguage = /language-(\w+)/.exec(className || '')
    29              // inline is true if the code block is inline, e.g. `fmt.Println("Hello, world!")`
    30              // If the code is inline, we don't want to render it with SyntaxHighlighter.
    31              return !inline && matchLanguage ? (
    32                <SyntaxHighlighter
    33                  // eslint-disable-next-line react/no-children-prop
    34                  children={String(children).replace(/\n$/, '')}
    35                  language={matchLanguage[1]}
    36                  PreTag="div"
    37                  {...props}
    38                  style={oneDark}
    39                />
    40              ) : (
    41                <code className={className} {...props}>
    42                  {children}
    43                </code>
    44              )
    45            }
    46          }}
    47        />
    48      </div>
    49    )
    50  }
    51  
    52  export default CriterionComment