---
title: Benutzerdefinierter Code und Code-Snippets mit GitHub
slug: docs/de/benutzerdefinierter-code-und-code-snippets-mit-github
description: Erfahren Sie, wie Sie Ihr Archbee-Konto mit GitHub integrieren, um Ihren benutzerdefinierten Code und CSS nahtlos zu synchronisieren. Folgen Sie der Schritt-für-Schritt-Anleitung, um eine „archbee.json“-Datei in Ihrem GitHub-Repository zu definieren und g
createdAt: 2023-01-18T08:31:59.000Z
---

Die Integration mit GitHub ermöglicht es Ihnen, die [Benutzerdefinierter Code](docId\:cR4sXSwVdPVsJvZ7DD5Ab):  [customCSS](docId\:hHtGQ5bJAhDLmeYuCx6ky), **customJS**, **footerTemplate**, **headerTemplate**, direkt aus dem GitHub-Repository zu synchronisieren. Diese Variablen können Rohtext sein oder auf eine Datei aus dem `Wurzel` Ordner verlinken. 

Sie müssen lediglich die `archbee.json` Datei in Ihrem Repository definieren und Ihren benutzerdefinierten Code oder benutzerdefiniertes CSS hinzufügen, wie in diesem Beispiel:

:::CodeblockTabs
archbee.json

```json
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"custom.js",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
```

summary.md

```none
# Table of contents

- [Introduction](introduction.md)

## Walkthroughs

- [Installing](walkthroughs/01-installing-app.md)
- [Adding Event Handlers](walkthroughs/02-adding-event-handlers.md)
- [Defining Custom Elements](walkthroughs/03-defining-custom-elements.md)

## Docs

- [Configuring](docs/01-configuring-app.md)
- [Adding info](docs/02-adding-info.md)
- [Starting App ](docs/03-starting-app.md)
```

custom.js

```markdown
window._archbee = window._archbee || {
  queue: [],
  push: function (x) {window._archbee.queue.push(x)}
};

window._archbee.push({
  eventType: "init",
  spaceId: "PUBLISHED-0AUu0NJ_zFLC52lH2Yy5U",
});
```
:::

Wenn Sie den Code auf GitHub pushen, liest Archbee die Konfiguration aus der `archbee.json` Datei und aktualisiert automatisch den Abschnitt **Space Einstellungen -> Benutzerdefinierter Code**mit Ihrem neuen Code.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "Benutzerdefinierter Code in Space Einstellungen")

## Code-Snippets

Sie können Code-Snippets in Ihrem GitHub-Repository hinzufügen, Sie müssen sie nur in der `config.md` Datei konfigurieren.

:::hint{type="warning"}
Die `config.md` Datei muss im selben Ordner platziert werden wie die `summary.md` Datei.
:::

Unten finden Sie ein Beispiel für eine `config.md` Datei:

:::CodeblockTabs
config.md

```markdown
## use a file relative to  docsPath folder
::use{file="swagger-v2.json#L2"}

## relative path to repo structure
::use{file="/app/package.json#L1-L5"}

## relative path to docsPath folder
::use{file="../app/package.json#L1-L5"}

## one single line
::use{file="../app/package.json#L5"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="L6" to="L10" syntax="javascript"}

```
:::

### Beispiel

Angenommen, Sie haben die folgende `package.json` Datei (aus dem obigen Beispiel):

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/cS_lk0o5MtUDGpk-qzVbk_github-codesnippets-light.png "Code-Snippet Beispiel")

Und außerdem die `config.md` Datei:

:::CodeblockTabs
config.md

```markdown
## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="90" to="127" syntax="javascript"}

```
:::

Nach dem Import sehen Sie Folgendes im Archbee-Dokument:

```javascript
      "post": {
        "tags": ["pet"],
        "summary": "Add a new pet to the store",
        "description": "",
        "operationId": "addPet",
        "consumes": ["application/json", "application/xml"],
        "produces": ["application/json", "application/xml"],
        "parameters": [
          {
            "in": "body",
            "name": "body",
            "description": "Pet object that needs to be added to the store",
            "required": true,
            "schema": {
              "$ref": "#/definitions/Pet"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Success!"
          },
          "405": {
            "description": "Invalid input"
          }
        },
        "security": [
          {
            "api_key": []
          },
          {
            "petstore_auth": ["write:pets", "read:pets"]
          }
        ]
      },
```