InstallationComponents
Back to Components

NexusSnippet

A compact component for displaying inline code snippets with syntax highlighting, perfect for documentation and tutorials.

Basic Usage

<NexusSnippet>const message = 'Hello world';</NexusSnippet>

Properties

General

PropertyDescriptionTypeDefault
contentThe content inside the snippet (inline code)stringundefined
typeThe type of code (for syntax highlighting)'js' | 'html' | 'css''js'

Appearance

PropertyDescriptionTypeDefault
themeTheme configuration{ dark: boolean, colors: {...} }{ colors: color, dark: true }

Use Cases

Documentation

Enhance documentation with inline code references:

<p>To fetch data from an API, use <NexusSnippet>fetch('https://api.example.com/data')</NexusSnippet> 
and handle the response with <NexusSnippet>response.json()</NexusSnippet>.</p>
<p>Don't forget to catch errors: <NexusSnippet>.catch(error => console.error(error))</NexusSnippet></p>

To fetch data from an API, use fetch('https://api.example.com/data')and handle the response with response.json().

Don't forget to catch errors: .catch(error => console.error(error))

Advanced Examples

Multiple Languages

Use the type attribute to specify the language for syntax highlighting:

{/* JavaScript Example */}
<NexusSnippet>
const array = [1, 2, 3, 4, 5];
const doubled = array.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
</NexusSnippet>

{/* HTML Example */}
<NexusSnippet type="html">
<div class="container">
  <h1 class="title">Hello World</h1>
  <p>This is an example</p>
</div>
</NexusSnippet>

{/* CSS Example */}
<NexusSnippet type="css">
.container {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}
</NexusSnippet>

Inline Usage

Mix different types of snippets within text for documentation:

<ul style="line-height: 2">
  <li>JavaScript: <NexusSnippet>const array = [1, 2, 3].map(n => n * 2);</NexusSnippet></li>
  <li>HTML with slot: <NexusSnippet type="html" content="<div class='container'></div>"></NexusSnippet></li> 
  <li>HTML with content prop: <NexusSnippet type="html" content="<div class='wrapper'><h1>Title</h1></div>"></NexusSnippet></li>
  <li>CSS: <NexusSnippet type="css">.container { display: flex; }</NexusSnippet></li>
</ul>

Custom Theming

Customize the appearance with the theme property:

<div style="padding: 20px; background-color: #f8f9fa; border-radius: 8px;">
  <p>
    Use <NexusSnippet theme={{ dark: false }}>document.querySelector('.element')</NexusSnippet> to select DOM elements.
  </p>
  <p>
    Style your elements with <NexusSnippet type="css" theme={{ dark: false }}>.element { color: blue; }</NexusSnippet> to make them stand out.
  </p>
</div>

React Integration

Use the React wrapper for easier integration in React applications:

// Import the React wrapper component
import { NexusSnippet } from "code-nexus-react";

// Use the component in your React application
function Documentation() {
  // This component will render code snippets
  return (
    <div>
      <h2>Code Examples</h2>
      
      <p>
        JavaScript Example:
        <NexusSnippet>
          fetch('/api/data')
        </NexusSnippet>
      </p>
      
      <p>
        CSS Example:
        <NexusSnippet type="css">
          .container { display: flex; }
        </NexusSnippet>
      </p>
    </div>
  );
}

Live Examples

Basic Inline JavaScript

Use the nexus-snippet component to display code inline with proper syntax highlighting:

Here's how to create a variable in JavaScript: const message = 'Hello world';

Documentation Style

Perfect for tutorial-style content with inline code references:

To fetch data from an API, use fetch('https://api.example.com/data') and handle the response with response.json().

Don't forget to catch errors: .catch(error => console.error(error))

Multiple Languages

Examples in different languages with type attribute:

JavaScript:

const array = [1, 2, 3, 4, 5]; const doubled = array.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10]

HTML:

<div className="container"> <h1 className="title">Hello World</h1> <p>This is an example</p> </div>

CSS:

.container { display: flex; flex-direction: column; max-width: 800px; margin: 0 auto; }

Inline Type Examples

Various ways to use the component inline with different types:

  • JavaScript: const array = [1, 2, 3].map(n => n * 2);
  • HTML with content prop:
  • CSS: .container { display: flex; }

Light Theme

For light-themed interfaces, you can set the theme property:

Use document.querySelector('.element') to select DOM elements.

Style your elements with .element { color: blue; } to make them stand out.