Passer au contenu principal
Utilisez CSS pour mettre en forme les éléments HTML, ou ajoutez du CSS et du JavaScript personnalisés pour adapter entièrement l’apparence et l’ergonomie de votre documentation.

​
Mise en forme avec Tailwind CSS

Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôler la mise en page, les espacements, les couleurs et d’autres propriétés visuelles. Quelques classes courantes :
  • w-full - Pleine largeur
  • aspect-video - Format 16:9
  • rounded-xl - Grands angles arrondis
  • block, hidden - Contrôle de l’affichage
  • dark:hidden, dark:block - Visibilité en mode sombre
Les valeurs arbitraires de Tailwind CSS ne sont pas prises en charge. Pour des valeurs personnalisées, utilisez plutôt la prop style. 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

​
CSS personnalisé

Ajoutez des fichiers CSS à votre référentiel et les noms de classes définis seront appliqués et disponibles dans tous vos fichiers MDX.

​
Ajout de style.css

Par exemple, vous pouvez ajouter le fichier style.css suivant pour personnaliser le style de la barre de navigation et du pied de page. 
#navbar {
  background: "#fffff2";
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​
Utiliser des identifiants et des sélecteurs

Mintlify propose un ensemble d’identifiants et de sélecteurs courants pour vous aider à baliser les éléments importants de l’interface.
Utilisez l’outil d’inspection des éléments pour trouver les références des éléments que vous souhaitez personnaliser.
  • APIPlaygroundInput: api-playground-input
  • AssistantEntry: assistant-entry
  • AssistantEntryMobile: assistant-entry-mobile
  • Banner: banner
  • ChangelogFilters: changelog-filters
  • ChangelogFiltersContent: changelog-filters-content
  • ChatAssistantSheet: chat-assistant-sheet
  • ChatAssistantTextArea: chat-assistant-textarea
  • ContentArea: content-area
  • ContentContainer: content-container
  • ContentSideLayout: content-side-layout
  • Footer: footer
  • Header: header
  • NavBarTransition: navbar-transition
  • NavigationItems: navigation-items
  • Navbar: navbar
  • PageContextMenu: page-context-menu
  • PageContextMenuButton: page-context-menu-button
  • PageTitle: page-title
  • Pagination: pagination
  • Panel: panel
  • RequestExample: request-example
  • ResponseExample: response-example
  • SearchBarEntry: search-bar-entry
  • SearchBarEntryMobile: search-bar-entry-mobile
  • SearchInput: search-input
  • Sidebar: sidebar
  • SidebarContent: sidebar-content
  • TableOfContents: table-of-contents
  • TableOfContentsContent: table-of-contents-content
  • TableOfContentsLayout: table-of-contents-layout
  • TopbarCtaButton: topbar-cta-button
  • Accordion: accordion
  • AccordionGroup: accordion-group
  • AlmondLayout: almond-layout
  • AlmondNavBottomSection: almond-nav-bottom-section
  • AlmondNavBottomSectionDivider: almond-nav-bottom-section-divider
  • Anchor: nav-anchor
  • Anchors: nav-anchors
  • APISection: api-section
  • APISectionHeading: api-section-heading
  • APISectionHeadingSubtitle: api-section-heading-subtitle
  • APISectionHeadingTitle: api-section-heading-title
  • Callout: callout
  • Card: card
  • CardGroup: card-group
  • ChatAssistantSheet: chat-assistant-sheet
  • ChatAssistantSheetHeader: chat-assistant-sheet-header
  • ChatAssistantSheetContent: chat-assistant-sheet-content
  • ChatAssistantInput: chat-assistant-input
  • ChatAssistantSendButton: chat-assistant-send-button
  • CodeBlock: code-block
  • CodeGroup: code-group
  • Content: mdx-content
  • DropdownTrigger: nav-dropdown-trigger
  • DropdownContent: nav-dropdown-content
  • DropdownItem: nav-dropdown-item
  • DropdownItemTextContainer: nav-dropdown-item-text-container
  • DropdownItemTitle: nav-dropdown-item-title
  • DropdownItemDescription: nav-dropdown-item-description
  • DropdownItemIcon: nav-dropdown-item-icon
  • Expandable: expandable
  • Eyebrow: eyebrow
  • FeedbackToolbar: feedback-toolbar
  • Field: field
  • Frame: frame
  • Icon: icon
  • Link: link
  • LoginLink: login-link
  • Logo: nav-logo
  • Mermaid: mermaid
  • MethodNavPill: method-nav-pill
  • MethodPill: method-pill
  • NavBarLink: navbar-link
  • NavTagPill: nav-tag-pill
  • NavTagPillText: nav-tag-pill-text
  • OptionDropdown: option-dropdown
  • PaginationNext: pagination-next
  • PaginationPrev: pagination-prev
  • PaginationTitle: pagination-title
  • Panel: panel
  • SidebarGroup: sidebar-group
  • SidebarGroupIcon: sidebar-group-icon
  • SidebarGroupHeader: sidebar-group-header
  • SidebarNavGroupDivider: sidebar-nav-group-divider
  • SidebarTitle: sidebar-title
  • Step: step
  • Steps: steps
  • Tab: tab
  • Tabs: tabs
  • TabsBar: nav-tabs
  • TabsBarItem: nav-tabs-item
  • TableOfContents: toc
  • TableOfContentsItem: toc-item
  • Tooltip: tooltip
  • TopbarRightContainer: topbar-right-container
  • TryitButton: tryit-button
  • Update: update
Les références et la mise en forme des éléments courants peuvent évoluer au fil des mises à jour de la plateforme. Utilisez les styles personnalisés avec prudence.

​
JavaScript personnalisé

Le JavaScript personnalisé vous permet d’ajouter du code exécutable personnalisé à l’échelle du site. C’est l’équivalent d’ajouter une balise <script> avec du code JS sur chaque page.

​
Ajout de JavaScript personnalisé

Tout fichier .js placé dans le répertoire content de votre documentation sera inclus dans chaque page. Par exemple, vous pouvez ajouter le fichier ga.js suivant pour activer Google Analytics sur l’ensemble de la documentation. 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
Utilisez-le avec précaution afin de ne pas introduire de vulnérabilités de sécurité.