Intégration Obsidian

Apprenez à insérer vos graphiques Embases dans des notes Obsidian via iFrame natif, à configurer les paramètres requis, et à utiliser Obsidian Publish.

iFrame natif en Markdown

Obsidian supporte les balises HTML nativement dans les notes Markdown. Cela signifie que vous pouvez insérer une balise <iframe> directement dans le contenu de votre note, sans plugin supplémentaire. Pour insérer un graphique Embases dans une note Obsidian, commencez par ouvrir la note concernée.

Obsidian propose deux modes d'édition principaux : le mode Source (source code view) et le mode Live Preview (aperçu en direct). Pour insérer le code iFrame, basculez en mode Source en appuyant sur le raccourci Ctrl+E (Windows/Linux) ou Cmd+E (Mac), ou en cliquant sur le bouton en haut à droite de la note qui alterne entre les modes d'édition. En mode Source, vous voyez le Markdown brut de votre note.

Positionnez votre curseur à l'endroit exact où vous souhaitez que le graphique apparaisse dans la note — par exemple entre deux paragraphes ou sous un titre de section. Collez le code iFrame Embases directement dans le Markdown. La balise HTML est valide en Markdown standard et sera rendue par Obsidian.

Pour voir le graphique rendu, basculez en mode Lecture (Reading View) via le raccourci Ctrl+E / Cmd+E, ou cliquez sur l'icône livre en haut à droite de la note. En mode Lecture, l'iFrame est interprété et le graphique Embases s'affiche inline dans le contenu de la note, entre le texte Markdown.

<iframe
  src="https://embases.com/e/VOTRE_TOKEN"
  width="100%"
  height="420"
  frameborder="0"
  loading="lazy"
  title="Graphique Embases"
></iframe>

Astuce : En mode Live Preview (l'éditeur hybride par défaut), un placeholder peut s'afficher à la place de l'iFrame pendant l'édition. Passez en mode Lecture (Ctrl+E ou bouton en haut à droite) pour voir le graphique rendu.

Paramètre requis

Par défaut, Obsidian autorise les balises HTML dans les notes Markdown et rend les iFrames en mode Lecture. Cependant, si votre graphique Embases ne s'affiche pas en mode Lecture malgré un code iFrame correct, il est possible qu'un paramètre de sécurité bloque le rendu.

Pour vérifier et corriger ce paramètre, accédez aux paramètres Obsidian en cliquant sur l'icône engrenage en bas à gauche de l'interface (ou via le menu Fichier → Paramètres sur Mac). Dans le panneau de paramètres, cliquez sur « Éditeur » dans la liste de gauche. Faites défiler la page vers le bas jusqu'à trouver la section « Avancé » ou « Advanced ». Dans cette section, cherchez l'option « Strict mode » ou « Sanitize HTML » (la formulation exacte varie selon la version d'Obsidian). Si cette option est activée (toggle bleu ou coché), désactivez-la.

Le mode Strict filtre les balises HTML considérées comme potentiellement dangereuses — les iFrames font partie des balises filtrées. En désactivant ce mode, Obsidian rendra tous les éléments HTML valides, y compris vos iFrames. Après avoir modifié ce paramètre, fermez les paramètres et repassez en mode Lecture sur votre note — le graphique devrait maintenant s'afficher correctement.

Astuce : Si vous utilisez Obsidian sur un appareil partagé ou dans un contexte de sécurité strict, préférez utiliser un embed Embases en mode public et évitez les embeds avec clé privée dans vos notes Markdown.

Obsidian Publish

Obsidian Publish est le service d'hébergement officiel d'Obsidian qui vous permet de publier vos notes sous forme de site web accessible publiquement. Si vous utilisez Obsidian Publish, les notes que vous publiez sont accessibles via un domaine au format votre-pseudo.obsidian.md, ou via un domaine personnalisé si vous en avez configuré un.

Les bonnes nouvelles : Obsidian Publish supporte les iFrames dans les notes Markdown publiées. Les graphiques Embases que vous avez insérés dans vos notes s'affichent correctement sur les pages publiées, exactement comme ils le font dans l'application Obsidian en mode Lecture.

Si vous avez activé le Domain Whitelisting sur votre embed Embases, vous devez ajouter le domaine de votre site Obsidian Publish dans la liste blanche. Si vous utilisez le domaine par défaut, ajoutez publish.obsidian.md dans les domaines autorisés de votre embed. Si vous avez configuré un domaine personnalisé pour votre Obsidian Publish (par exemple notes.monsite.com), ajoutez votre domaine personnalisé. Dans le doute, ajoutez les deux pour couvrir tous les cas de figure.

Obsidian mobile

L'application mobile Obsidian (disponible sur iOS et Android) supporte le rendu des iFrames en mode Lecture, tout comme la version desktop. Vous pouvez donc consulter vos notes contenant des graphiques Embases depuis votre smartphone ou tablette.

Cependant, sur les petits écrans mobiles, les iFrames avec une hauteur fixe (par exemple height="420") peuvent apparaître trop grands ou mal proportionnés par rapport à la largeur disponible. Pour optimiser l'affichage mobile de votre embed Embases, vous pouvez utiliser un wrapper div avec la technique du padding-bottom responsive. Cette technique adapte automatiquement la hauteur de l'iFrame à la largeur de l'écran, quelle que soit la taille du dispositif.

Alternativement, vous pouvez définir une hauteur plus petite directement dans votre code iFrame — par exemple height="300" — ce qui donne un meilleur rendu sur mobile sans être trop petit sur desktop. Si vous avez plusieurs notes avec des graphiques Embases, vous pouvez créer un template de note Obsidian avec le code iFrame préconfiguré et le réutiliser pour chaque nouvelle note.

<!-- Wrapper responsive pour Obsidian mobile -->
<div style="position:relative;padding-bottom:56%;height:0;overflow:hidden;">
  <iframe
    src="https://embases.com/e/VOTRE_TOKEN"
    style="position:absolute;top:0;left:0;width:100%;height:100%;"
    frameborder="0"
    loading="lazy"
    title="Graphique Embases"
  ></iframe>
</div>

Étapes suivantes