The Code component allows you to display inline or block code snippets in your applications.
It supports line numbers, optional syntax highlighting, and flexible styling for readable, interactive code blocks.

• Inline or block display: Render single-line or multi-line code snippets.
• Line numbers: Display line numbers for reference.
• Customizable styling: Control colors, fonts, backgrounds, and highlights.
• Interactive use: Can be combined with copy-to-clipboard functionality.

Usage Example

Preview

    .card {

    width: 400px;

    padding: 20px;

    border: 1px solid #0d1117;

    border-radius: 10px;

    background-color: #000;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    cursor: pointer;

    }

Code

<script lang="ts">
  import { Code } from "@fefade-ui/svelte"

  const data = `
        .card {
            width: 400px;
            padding: 20px;
            border: 1px solid #0d1117;
            border-radius: 10px;
            background-color: #000;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }`
</script>

<Code>
  {#each data.split("\n").filter((l) => l.trim() !== "") as text, i (i)}
    <Code.Item lineNumber={i}>
      {text.trim()}
    </Code.Item>
  {/each}
</Code>

Props

Prop	Type	Default	Description
Code.Item	component	Required	Individual line of code with optional lineNumber.
lineNumber	number	Optional	The line number displayed next to each code line.
style	string	""	Inline CSS styles for custom styling of the code block.
syntax	string	Optional	Optional syntax highlighting mode (e.g., "javascript", "html").

Best Practices

• Keep code readable by using proper indentation and formatting.
• Use line numbers for long blocks of code to improve clarity.
• Combine with a Clipboard component for copy functionality.
• Apply contrastive styling to make code blocks stand out in dark or light themes.
• Avoid overly long code blocks—consider splitting into multiple smaller snippets for readability.