डॉक लेआउट

डॉक लेआउट दस्तावेज़ पृष्ठों के लिए एक दो कॉलम पैटर्न है - बाईं ओर विवरण, दाईं ओर कोड - जो मोबाइल पर एकल कॉलम में संकुचित हो जाता है।

संरचना

.doc को बाहरी लपेटन के रूप में उपयोग करें और प्रत्येक पंक्ति के लिए .doc-section का उपयोग करें। प्रत्येक अनुभाग में .doc-section--description और .doc-section--code कॉलम होता है।

बुनियादी अनुभाग

एक सामान्य अनुभाग एक विवरण ब्लॉक को एक कोड स्निपेट के साथ जोड़ता है।

डेमो सामग्री

<div class="doc">
  <div class="doc-section">
    <div class="doc-section--description">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <div class="doc-section--code">
      <!-- code snippet -->
    </div>
  </div>
</div>

कोड ब्लॉक के साथ

.doc-section--code के अंदर कोड-ब्लॉक आंशिक का उपयोग करें ताकि सिंटैक्स-हाइलाइटेड उदाहरण मिल सके।

डेमो सामग्री

{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}