Zum Hauptinhalt springen

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:

Vorher​

# Remark Code as Attribute

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

Nachher​

# Remark Code as Attribute

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

oder mit dem effektiven Code einer Komponente:

Vorher​

# Remark Raw Code as Attribute

<CodeShowcase>
  <Foo>
    <Bar text="Bazz" />
  </Foo>
</CodeShowcase>

Nachher​

# Remark Raw Code as Attribute

<CodeShowcase code="\n<Foo>\n  <Bar text=\"Bazz\" />\n</Foo>\n" />
  <Foo>
    <Bar text="Bazz" />
  </Foo>
</CodeShowcase>

Optionen​

Das Plugin kann wie folgt konfiguriert werden:

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

interface BaseConfig {
    name: string;
    attributeName: string;
}

interface ComponentConfig {
    name: string;
    attributeName: string;
    codeAttributesName?: string;
    processMultiple?: boolean;
}
const codeAsAttributePluginConfig = [
  codeAsAttributePlugin,
  {
    components: ComponentConfig[],
    rawCodeComponents?: BaseConfig[]
  }
]

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: 'Pyodide', // Name der React-Komponente
                attributeName: 'code' // der Code wird als Attribut `code` übergeben
            },
            {
                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
            }
            /*...*/
          ],
          rawCodeComponents: [
              {
                  name: 'CodeShowcase',
                  attributeName: 'code'
              }
              /*...*/
          ]
        }
      ]
    ]
];