Code as Attribute

Dieses Remark-Plugin ermöglicht es, Codeblöcke als Attribute an spezifizierte MDX-Komponenten zu übergeben. Dies ist besonders nützlich, wenn Codeblöcke als MD-Codeblock formatiert werden sollen, aber der Code als Inhalt an eine Komponente übergeben werden muss.

Wird bspw. eingesetzt für:

• 👉 SVG-Editor
• 👉 Netpbm-Editor
• 👉 HTML-Editor

Vorher

# Remark Code as Attribute

<HtmlEditor>
```html name="index.html"
<h1>Foo Bar</h1>
```
</HtmlEditor>

Nachher

<HtmlEditor code="\n<h1>Foo Bar</h1>\n" />

Optionen

codeAttributesName

Wird codeAttributesName angegeben, so werden die Attribute lang und meta des Codeblocks zusätzlich als Objekt mit diesem Namen übergeben.

Komponenten-Konfiguration

{
    name: 'HtmlIDE',
    attributeName: 'code',
    codeAttributesName: 'codeAttributes'
}

Vorher

# Remark Code as Attribute

<TemplateCode>
```html name=index.html
<h1>Foo Bar</h1>
```
</TemplateCode>

Nachher

<TemplateCode 
  code="\n<h1>Foo Bar</h1>\n" 
  lang="html" 
  meta="name=index.html"
/>

processMultiple

Ist processMultiple gesetzt, so werden alle aufeinanderfolgenden Codeblöcke als Array von Objekten an die Komponente übergeben, wobei der CodeBlock im Feld code zu finden ist. Jedes Objekt enthält den Code und ggf. die Attribute lang und meta.

Komponenten-Konfiguration

{
    name: 'HtmlIDE',
    attributeName: 'files',
    processMultiple: true
}

Vorher

# Remark Code as Attribute

<HtmlIDE>
```html name=foo.html
<h1>Foo</h1>
```
```html name=bar.html
<h1>Bar</h1>
```
</HtmlIDE>

Nachher

<HtmlIDE 
  files={[
    { code: "\n<h1>Foo</h1>\n", lang: "html", meta: "name=foo.html" },
    { code: "\n<h1>Bar</h1>\n", lang: "html", meta: "name=bar.html" }
  ]}
/>

Installation

Code

• src/plugins/remark-code-as-attribute

docusaurus.config.ts

import codeAsAttributePlugin from './src/plugins/remark-code-as-attribute/plugin';

const REMARK_PLUGINS = [
    /* ... */
    [
      [
        codeAsAttributePlugin,
        {
          components: [
            {
                name: 'HtmlEditor', // Name der React-Komponente
                attributeName: 'code' // der Code wird als Attribut `code` übergeben
            },
            {
                name: 'HtmlIDE',
                attributeName: 'files',
                processMultiple: true // der Code wird als Array von MultiCode-Objekten übergeben
            },
            {
                name: 'TemplateCode',
                attributeName: 'code',
                codeAttributesName: 'codeAttributes' // es werden zusätzlich `lang` und `meta` übergeben
            }
            /*...*/
          ],
        }
      ]
    ]
];