---
title: Code personnalisé et extraits de code avec GitHub
slug: code-personnalise-et-extraits-de-code-avec-github
description: Découvrez comment intégrer votre compte Archbee à GitHub pour synchroniser facilement votre code personnalisé et votre CSS. Suivez le guide étape par étape pour définir un fichier 'archbee.json' dans votre dépôt GitHub et ajouter facilement votre code ou 
docTags: 
createdAt: 2023-01-18T08:31:59.000Z
---

L’intégration avec GitHub vous permet de synchroniser le [Code personnalisé](docId\:QiOKnznumCn1uKPKcRNWQ):  [customCSS](docId\:xsc0r46KTUciDI2LNNeoE), **customJS**, **footerTemplate**, **headerTemplate**, directement depuis le dépôt GitHub. Ces variables peuvent être du texte brut ou un lien vers un fichier depuis le dossier `racine`. 

Vous devez simplement définir le fichier `archbee.json` dans votre dépôt et ajouter votre code personnalisé ou votre CSS personnalisé, comme dans cet exemple :

:::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",
});
```
:::

Si vous poussez le code vers GitHub, Archbee lira la configuration depuis le fichier `archbee.json` et mettra automatiquement à jour la section **Paramètres de l’espace -> Code personnalisé**avec votre nouveau code.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "Code personnalisé dans Space settings")

## Extraits de code

Vous pouvez ajouter des extraits de code dans votre dépôt GitHub, vous devez simplement les configurer dans le fichier `config.md`.

:::hint{type="warning"}
Le fichier `config.md` doit être placé dans le même dossier que le fichier `summary.md`.
:::

Voici un exemple de fichier `config.md` :

:::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"}

```
:::

### Exemple

En supposant que vous avez le fichier `package.json` ci-dessous (de l’exemple ci-dessus) :

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/cS_lk0o5MtUDGpk-qzVbk_github-codesnippets-light.png "Exemple d’extrait de code")

Et aussi le fichier `config.md` :

:::CodeblockTabs
config.md

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

```
:::

Vous verrez ce qui suit dans le document Archbee après l’import :

```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"]
          }
        ]
      },
```