Add abcjs (#537)

src/components/markdown-renderer/replace-components/abc/abc-frame.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useRef } from 'react'
+import { renderAbc } from 'abcjs'
+
+export interface AbcFrameProps {
+  code: string
+}
+export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (container.current) {
+      renderAbc(container.current, code)
+    }
+  }, [code])
+
+  return (
+    <div ref={container}/>
+  )
+}

src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx

@@ -0,0 +1,16 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { AbcFrame } from './abc-frame'
+
+export class AbcReplacer implements ComponentReplacer {
+  getReplacement (codeNode: DomElement, index: number): React.ReactElement | undefined {
+    if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'abc' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <AbcFrame key={'index'} code={code}/>
+  }
+}