Schrek.fr

Attention cette article date depuis plus d'un an (596 jours).
Table des matières

On va creer notre shortcode pour le site Codepen, ca qui va nous permetre l’afficher dans Hugo.

Le code

Sur le site de Codepen, dans l’onglet embeb on va trouver le code Html pour l’integrer sur un site.

<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="html,result" data-slug-hash="YzObPmg" data-user="christ0phe" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/christ0phe/pen/YzObPmg">
  Purecss</a> by christophe (<a href="https://codepen.io/christ0phe">@christ0phe</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Le Shortcode

Dans le lien de Codepen on a l’identifiant a la fin YzObPmg

https://codepen.io/christ0phe/pen/YzObPmg

{{< codepen code >}}  
<!--
https://codepen.io/
-->
<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="html,result" data-slug-hash="{{- .Get 0 -}}"" data-user="christ0phe" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>Voir le pen <a href="https://codepen.io/christ0phe/pen/{{- .Get 0 -}}"">
  Purecss</a> by christophe (<a href="https://codepen.io/christ0phe">@christ0phe</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Résultat

{{< codepen YzObPmg >}}

Voir le pen Purecss by christophe (@christ0phe) on CodePen.

Liens

https://kinson.io/post/embed-codepen/

Métadonnées

Posté le: 25.05.2023
Nombre de mots: 166
Temps de lecture: 1 minutes
Cet article fait partie de la série: Hugo