---
title: Código personalizado y fragmentos de código con GitHub
slug: docs/es/codigo-personalizado-y-fragmentos-de-codigo-con-github
description: Aprende cómo integrar tu cuenta de Archbee con GitHub para sincronizar sin problemas tu código personalizado y CSS. Sigue la guía paso a paso para definir un archivo 'archbee.json' en tu repositorio de GitHub y agregar fácilmente tu código o CSS personali
createdAt: 2023-01-18T08:31:59.000Z
---

La integración con GitHub le permite sincronizar el [Código Personalizado](docId\:CgaNeZuczYfhpcRRuw9Y7):  [customCSS](docId\:NKOStykm9MNb75x6HWABH), **customJS**, **footerTemplate**, **headerTemplate**, directamente desde el repositorio de GitHub. Estas variables pueden ser texto sin formato o un enlace a un archivo desde la carpeta `raíz`. 

Solo necesita definir el archivo `archbee.json` en su repositorio y agregar su código personalizado o CSS personalizado, como en este ejemplo:

:::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 envía el código a GitHub, Archbee leerá la configuración del archivo `archbee.json` y actualizará automáticamente la sección **Configuraciones de Espacio -> Código Personalizado**con su nuevo código.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "Código personalizado en Configuraciones del espacio")

## Fragmentos de código

Puede agregar fragmentos de código en su repositorio de GitHub, solo necesita configurarlos en el archivo `config.md`.

:::hint{type="warning"}
El archivo `config.md` debe colocarse en la misma carpeta que el archivo `summary.md`.
:::

A continuación se muestra un ejemplo de un archivo `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"}

```
:::

### Ejemplo

Suponiendo que tiene el siguiente archivo `package.json` (del ejemplo anterior):

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/cS_lk0o5MtUDGpk-qzVbk_github-codesnippets-light.png "Ejemplo de fragmento de código")

Y también el archivo `config.md`:

:::CodeblockTabs
config.md

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

```
:::

Verá lo siguiente en el documento de Archbee después de la importación:

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