Comment utiliser l'API ?

Cet API se décline en 2 utilisations :

Généralité

Pour utiliser l'API, il faut intégrer le code suivant dans votre site :

<42> /* Importations */ @import url(https://fonts.googleapis.com/css?family=Philosopher); @import url(https://fonts.googleapis.com/css?family=Roboto); @import url(https://fonts.googleapis.com/css?family=Fira+Mono); /* Main style */ body { overflow-x: hidden; } #title { /* Positioning */ position: absolute; left: 0; top: 0; width: 100%; height: 3.5em; padding: 10px 0; /* Visual */ background-color: #333533; vertical-align: center; } #title > h1 { /* Positioning */ margin: auto auto 0 20px; /* Visual */ font-family: Philosopher; color: #f5cb5c; } #title > p { /* Positioning */ margin: 0 auto auto 20px; /* Visual */ font-family: Roboto; font-size: 0.8em; color: #d9d9d9; } #launch { /* Positioning */ position: absolute; right: 5%; bottom: 0; padding: 10px; z-index: 9; /* Visual */ color: white; background-color: #f5cb5c; border-top-left-radius: 5px; border-top-right-radius: 5px; vertical-align: center; text-align: middle; font-family: Roboto; font-weight: bold; letter-spacing: 1px; cursor: pointer; } #editor { /* Variable */ counter-reset: lines; /* Positioning */ position: absolute; left: 0; top: calc(3.5em + 20px); padding: 10px 0; width: 100%; height: calc(100% - 3.5em - 40px); /* Visual */ outline: none; overflow-x: auto; overflow-y: auto; background-color: #242423; font-family: "Fira Mono"; font-size: 1em; color: #cfdbd5; } .code-line::before { /* Variable */ counter-increment: lines; /* Positioning */ position: absolute; left: -40px; bottom: 0; z-index: 2; /* Visual */ font-size: 0.8em; content: counter(lines); } .code-line { /* Positioning */ position: relative; left: 50px; width: calc(100% - 50px); z-index: 2; } [id*="constructor"] { /* Variable */ counter-reset: lines; /* Positioning */ position: absolute; left: 30%; transform: translate(100%, 0); top: calc(3.5em + 20px); padding: 10px 0; width: 70%; height: calc(100% - 3.5em - 40px); z-index: -1; /* Visual */ outline: none; overflow-x: auto; overflow-y: auto; opacity: 0%; background-color: #000000; font-family: "Fira Mono"; font-size: 1em; color: greenyellow; /* Animation */ transition: transform 1s, opacity 1s, z-index 1.3s; } [id$=".visible"] { transform: translate(0, 0); opacity: 100%; z-index: 3; }