CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gatsby-remark-prismjs

Adds syntax highlighting to code blocks at build time using PrismJS

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

shell-features.mddocs/

Shell Features

Specialized functionality for shell and bash code blocks including customizable command prompts and output line specification.

Capabilities

Command Line Function

Generates shell command line prompts for bash and shell code blocks.

/**
 * Generates shell command line prompts
 * @param code - Code string (used to count lines)
 * @param highlightLines - Array of line numbers that are output (no prompt)
 * @param user - Username for prompt display
 * @param host - Hostname for prompt display  
 * @returns HTML string with command prompt spans
 */
function commandLine(
  code?: string,
  highlightLines?: number[],
  user?: string,
  host?: string
): string;

Usage Examples:

// Basic prompt generation
const prompts = commandLine(
  "echo 'hello'\necho 'world'", 
  [], 
  "root", 
  "localhost"
);

// With output lines (no prompts on specified lines)
const promptsWithOutput = commandLine(
  "echo 'hello'\nhello\necho 'world'\nworld",
  [2, 4],  // Lines 2 and 4 are output, no prompts
  "developer",
  "workstation"
);

Shell Prompt Configuration

Configure shell prompts through plugin options or code block metadata.

Global Configuration:

// gatsby-config.js
options: {
  prompt: {
    user: "developer",
    host: "workstation",
    global: true  // Apply to all shell/bash blocks
  }
}

Per-Block Configuration:

```shell{promptUser: alice}{promptHost: server}
echo "Hello from alice@server"
```

```bash{outputLines: 2-4,6}
echo "Command 1"
Output line 1
Output line 2  
Output line 3
echo "Command 2"
Output line 4
```

Show Invisibles Plugin

Makes invisible characters visible in code blocks for debugging and educational purposes.

/**
 * Loads show-invisibles functionality for specific language
 * @param language - Programming language to apply invisibles to
 */
function loadPrismShowInvisibles(language?: string): void;

Invisible Character Types:

  • Tab: \t characters
  • Line Feed: \n characters
  • Carriage Return: \r characters
  • CRLF: \r\n sequences
  • Space: characters

Usage Example:

// Enable for JavaScript
loadPrismShowInvisibles("javascript");

// Enable for Python  
loadPrismShowInvisibles("python");

Prompt Display Patterns

The shell prompt system supports different display patterns based on user privileges.

Root User Prompt:

<span data-user="root" data-host="localhost">[root@localhost] #</span>

Regular User Prompt:

<span data-user="alice" data-host="server">[alice@server] $</span>

Custom Prompt:

<span data-prompt="custom> ">custom> </span>

Output Line Control

Control which lines show prompts versus output using the outputLines parameter.

Syntax Examples:

```shell{outputLines: 2}
echo "This line has a prompt"
This line has no prompt (output)
```

```bash{outputLines: 2-4,6}
command1
output1
output2
output3
command2
output4
```

Line Numbering:

  • Line numbers start from 1
  • Ranges use dash syntax: 2-4 means lines 2, 3, and 4
  • Multiple ranges/numbers separated by commas: 1,3-5,8

Required CSS

Shell features require specific CSS for proper prompt styling.

Command Line CSS:

// gatsby-browser.js
require("prismjs/plugins/command-line/prism-command-line.css")

Custom Prompt Styling:

.command-line-prompt > span:before {
  color: #999;
  content: " ";
  display: block;
  padding-right: 0.8em;
}

/* Prompt for all users */
.command-line-prompt > span[data-user]:before {
  content: "[" attr(data-user) "@" attr(data-host) "] $";
}

/* Prompt for root */
.command-line-prompt > span[data-user="root"]:before {
  content: "[" attr(data-user) "@" attr(data-host) "] #";
}

/* Custom prompts */
.command-line-prompt > span[data-prompt]:before {
  content: attr(data-prompt);
}

Activation Conditions

Shell features are automatically activated when certain conditions are met:

Languages: bash or shell

Activation Triggers:

  • Global prompt setting: prompt.global: true
  • Output lines specified: {outputLines: 1-3}
  • Custom user specified: {promptUser: alice}
  • Custom host specified: {promptHost: server}

Usage Examples:

```shell
# Prompts shown if global: true
echo "Hello"
```

```bash{outputLines: 2}
echo "Command"
Output line (no prompt)
```

```shell{promptUser: developer}
# Custom user prompt
echo "Custom user"
```

HTML Output Structure

The shell features generate specific HTML structures for proper rendering.

Command Line Structure:

<div class="gatsby-highlight" data-language="bash">
  <pre class="language-bash">
    <code class="language-bash">
      <span class="command-line-prompt">
        <span data-user="root" data-host="localhost"></span>
        <span></span>
        <span data-user="root" data-host="localhost"></span>
      </span>
      echo "hello"
      hello
      echo "world"
    </code>
  </pre>
</div>

Key Elements:

  • .command-line-prompt: Container for all prompt spans
  • data-user: Username attribute for prompt generation
  • data-host: Hostname attribute for prompt generation
  • Empty spans: Represent output lines (no prompt data)

Integration with Line Features

Shell features work together with line highlighting and numbering.

Combined Example:

```bash{1,3}{numberLines: true}{promptUser: developer}{outputLines: 2,4}
echo "First command"
First output
echo "Second command"  
Second output
```

This example:

  • Highlights lines 1 and 3
  • Shows line numbers starting from 1
  • Uses "developer" as username
  • Lines 2 and 4 are output (no prompts)
  • Lines 1 and 3 get prompts

docs

configuration.md

index.md

language-extensions.md

line-features.md

shell-features.md

syntax-highlighting.md

tile.json