Blocs Code

Ajoutez du code HTML, Markdown, CSS et bien plus encore pour personnaliser votre site au-delà de ses fonctionnalités intégrées.

Dernière mise à jour le 10 février 2025

Utilisez les blocs Code pour ajouter du code personnalisé à une page, à un billet de blog, à une barre latérale, à un pied de page ou dans une autre zone de contenu. Les blocs Code sont très pratiques si vous souhaitez intégrer des widgets tiers ou personnaliser vos pages au-delà des possibilités offertes par d’autres blocs. Vous pouvez également utiliser les blocs Code pour restituer du code HTML et Markdown ou afficher des extraits de code.

Pour découvrir comment choisir le bloc le plus adapté à votre contenu personnalisé, consultez l’article Ajouter du code personnalisé à votre site.

Accéder à cette fonctionnalité

Quel que soit le forfait, les blocs Code prennent en charge le texte brut, le code HTML, le code Markdown et le code CSS entouré des balises .

L’ajout de code JavaScript ou d’iframes aux blocs Code est disponible avec les forfaits Core, Plus, Avancé, Business, Commerce Basique et Commerce Avancé. Pour en savoir plus, consultez l’article Choisir le forfait Squarespace qu’il vous faut.

Regarder une vidéo

Ajouter un bloc Code

Pour ajouter un bloc Code :

  1. Modifiez une page ou une publication, cliquez sur Ajouter un bloc ou sur un point d’insertion, puis sur Code. Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec les blocs.
  2. Ouvrez l’éditeur de bloc en cliquant sur l’icône en forme de crayon sur le bloc.
  3. Ajoutez votre code dans le champ de texte.
  4. Si vous utilisez le bloc Code pour afficher des extraits de code, activez l’option Afficher la source.

Ajouter le code

Si vous utilisez le bloc Code pour restituer le code, sélectionnez HTML ou Markdown dans le menu Type.

Saisissez ou collez le code dans le champ de texte. Pour coller le code, copiez-le puis cliquez dans le champ et appuyez sur Ctrl + V (Windows) ou Commande + V (Mac).

Par défaut, les blocs Code définis sur CSS ou JavaScript affichent le code sous forme de texte. Pour restituer le code CSS ou JavaScript dans les blocs Code, sélectionnez HTML dans le menu déroulant. Pour CSS, placez le code entre les balises . Pour JavaScript, placez le code entre les balises .

Remarque

les blocs Code sont limités à 400 Ko, soit environ 300 000 caractères.

Afficher la source

Si vous utilisez le bloc Code pour afficher des extraits de code, activez l’option Afficher la source.

Cette option est utile pour afficher des exemples de code, car les blocs Code formatent automatiquement les extraits de code pour des raisons de lisibilité, ce qui en fait une meilleure solution qu’un bloc Texte.

Remarque

l'option Afficher la source est toujours cochée pour les options CSS, JavaScript et Texte brut.

Prévisualiser du code intégré

Par mesure de sécurité, il peut arriver que le code ne s’affiche pas lorsque vous êtes connecté(e), même si les visiteurs peuvent le voir. Si le code que vous avez ajouté à un bloc Code ne s’affiche pas, cliquez sur Aperçu en mode sans échec pour visualiser l’élément incorporé.

Bouton_apercu_en_mode_sans_echec.png

Résolution de problèmes

Quelques astuces à retenir si vous rencontrez des problèmes avec les blocs Code :

  • Votre code peut également ne pas s'afficher si vous l'avez ajouté à une page située dans un Index. Pour effectuer un test, retirez la page de l'Index dans le panneau Pages, puis déconnectez-vous de votre site.
  • Le chargement Ajax peut créer des problèmes avec le code personnalisé. Vous pouvez désactiver Ajax pour vérifier si le problème persiste.

Si des problèmes de bloc Code vous empêchent de modifier votre site, désactivez les scripts dans l’aperçu pour modifier ou supprimer le code.

Si vous rencontrez toujours des problèmes, nous vous conseillons de prendre contact avec la source (par exemple, le service vous ayant communiqué le code pour un widget), car elle connaît la façon dont il est censé fonctionner.

Remarque

la personnalisation basée sur du code n’est pas prise en charge par notre service d’assistance. Nous ne sommes en mesure de vous aider ni pour la configuration ni pour le dépannage du code personnalisé. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design réactif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Les personnalisations basées sur du code peuvent également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.