Lunasites is now in early access. Claim your exclusive launch offer.

Display Code Block


blocks.js 
const blocks = ['Button', 'Accordion', 'Carousel'];

blocks.forEach((block, index) => {
  console.log(String(index + 1) + '. ' + block);
});
JAVASCRIPT

The Display Code block presents a formatted, copyable code sample with syntax highlighting, an optional filename, a language label, line numbers, and a copy action. Use it for tutorials, API examples, configuration snippets, and focused examples that readers need to inspect or reuse.

The block displays code but does not execute it. Use a Text block for prose, and use Custom Code or HTML only when the page needs visitor-side behavior rather than a readable snippet.


Properties

Display Code Properties panel with snippet, language, filename, and line-number controls in a clear retina documentation capture


Code

Paste the exact snippet readers should inspect or copy. Keep one task or concept per example, remove unrelated setup, and test the longest line before publishing.


Language

Choose the language that matches the snippet so syntax highlighting and the footer label are accurate. Available modes are JavaScript, TypeScript, HTML, CSS, Python, JSON, Bash, Markdown, JSX, TSX, SQL, YAML, PHP, Ruby, Go, Rust, Java, C#, C++, and Plain Text.


Filename

Add an optional filename when the surrounding guide refers to a real file, such as blocks.js. Leave it empty for a standalone command or fragment that does not belong to a named file.


Show Line Numbers

Keep line numbers enabled for walkthroughs, reviews, and examples that reference specific lines. Turn them off for very short commands where numbering adds visual noise.


Layout

Display Code is content-driven and starts at 12 columns by 6 rows in a grid section. In inline content it follows the article flow; in a section, the grid frame controls width while the snippet, padding, header, and footer determine the required height. Preserve readable horizontal scrolling for long lines instead of compressing or clipping them.


Style Panel

Display Code Style Panel with Code Editor styling controls in a clear retina documentation capture

Code Editor controls the outer surface of the complete block. Its Default state exposes Background, Borders, and Effects. Establish the container first, keep its boundary visible against the article surface, and verify the resulting contrast at every breakpoint. This target has no On Hover tab.


Code Header

Code Header area in the Display Code Style Panel

Code Header styles the filename and copy-control row through Typography, Background, and Borders. Keep the filename readable beside the copy action and preserve a visible keyboard focus indicator. This target has no On Hover tab.


Code Lines

Code Lines area in the Display Code Style Panel

Code Lines exposes the supported Typography controls for the snippet and line numbers. Syntax colors come from the code highlighter, so prioritize a readable size and weight and test the longest realistic line on tablet and mobile. This target has no On Hover tab.


Code Footer

Code Footer area in the Display Code Style Panel

Code Footer styles the language label through Typography, Background, and Borders. Keep the label secondary to the snippet while maintaining sufficient contrast when the block becomes narrow. This target has no On Hover tab.


Motion

Entrance animation can use Fade In, directional slides, directional reveals, Zoom In or Out, Blur In, Pop In, or Flip Up, with duration, delay, and easing controls. Keep motion restrained so it does not delay access to the snippet.

Display Code does not expose Style Panel hover states for Code Editor, Code Header, Code Lines, or Code Footer. Do not simulate hover motion as the only interaction cue, and respect reduced-motion preferences.


Property summary

• Code — the exact snippet displayed and copied.

• Language — controls syntax highlighting and the language label.

• Filename — optional context shown in the header.

• Show Line Numbers — adds or removes visible numbering without changing the copied code.


Responsive behavior

Display Code is content-driven. Let the snippet, header, footer, padding, and border determine its natural height, and verify long lines at desktop, tablet, and mobile widths. Prefer usable horizontal scrolling to compressed typography, wrapping that changes code meaning, or clipped content.


Accessibility

Use sufficient contrast for code, line numbers, filename, language label, borders, and focus states. Keep the copy control keyboard-accessible with a visible focus indicator, preserve the snippet as selectable text, and provide explanatory context outside the syntax colors.


Common mistakes

Avoid the wrong language mode, decorative filenames, unexplained dependencies, excessively long unbroken lines, low-contrast line numbers, hidden horizontal overflow, and examples that suggest the Display Code block executes visitor-side code.

Questions, ideas, or bugs?

Explore what we’re building next, ask the Luna team for help, or send a focused bug report.