tessl/npm-gatsby-remark-prismjs
Adds syntax highlighting to code blocks at build time using PrismJS
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
configuration.mddocs/
Plugin Configuration
Core plugin configuration options for controlling syntax highlighting behavior, CSS classes, and feature toggles.
Capabilities
Plugin Options
Main configuration interface for the gatsby-remark-prismjs plugin.
/**
* Main plugin configuration options
*/
interface PluginOptions {
/** CSS class prefix for code blocks (default: "language-") */
classPrefix?: string;
/** Separator for inline code language specification */
inlineCodeMarker?: string | null;
/** Language alias mappings */
aliases?: Record<string, string>;
/** Disable inline code highlighting */
noInlineHighlight?: boolean;
/** Global line numbering toggle */
showLineNumbers?: boolean;
/** Show invisible characters */
showInvisibles?: boolean;
/** Custom language definitions */
languageExtensions?: LanguageExtension[];
/** Shell prompt configuration */
prompt?: PromptConfig;
/** Additional HTML entity escaping rules */
escapeEntities?: Record<string, string>;
}Usage Examples:
// Basic configuration
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
showLineNumbers: false,
noInlineHighlight: false,
}
}
// Advanced configuration with custom aliases and prompts
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "code-",
inlineCodeMarker: "›",
aliases: {
sh: "bash",
js: "javascript"
},
showLineNumbers: true,
prompt: {
user: "developer",
host: "workstation",
global: true
},
escapeEntities: {
'}': '}'
}
}
}Class Prefix Configuration
Controls the CSS class prefix applied to code blocks.
/**
* CSS class prefix for code blocks
* @default "language-"
*/
classPrefix?: string;The classPrefix determines the CSS classes applied to <pre> and <code> elements. For a language like javascript with default prefix, the resulting classes will be language-javascript.
Inline Code Marker
Enables language specification for inline code blocks using a separator character.
/**
* Separator for inline code language specification
* @default null
*/
inlineCodeMarker?: string | null;Usage Example:
// Configuration
inlineCodeMarker: "›"
// In markdown - this inline code will be highlighted as CSS:
// `css›.some-class { background-color: red }`Language Aliases
Maps alternative language names to standard PrismJS language identifiers.
/**
* Language alias mappings
* @default {}
*/
aliases?: Record<string, string>;Usage Example:
aliases: {
sh: "bash",
js: "javascript",
ts: "typescript"
}Inline Highlighting Control
Disables syntax highlighting for inline code when set to true.
/**
* Disable inline code highlighting
* @default false
*/
noInlineHighlight?: boolean;Global Line Numbers
Enables line numbering for all code blocks globally.
/**
* Global line numbering toggle
* @default false
*/
showLineNumbers?: boolean;When enabled, all code blocks will show line numbers. Individual blocks can still override this with {numberLines: true} or {numberLines: false} in their metadata.
Show Invisibles
Makes invisible characters (spaces, tabs, line breaks) visible in code blocks.
/**
* Show invisible characters
* @default false
*/
showInvisibles?: boolean;Prompt Configuration
Configures shell command prompt display for bash and shell code blocks.
/**
* Shell prompt configuration
*/
interface PromptConfig {
/** Default username for shell prompts */
user?: string;
/** Default hostname for shell prompts */
host?: string;
/** Apply prompts globally to shell code */
global?: boolean;
}Usage Example:
prompt: {
user: "developer",
host: "workstation",
global: false // Only show prompts when explicitly requested
}HTML Entity Escaping
Additional HTML entities to escape beyond the default set.
/**
* Additional HTML entity escaping rules
* @default {}
*/
escapeEntities?: Record<string, string>;Default escaped entities:
&→&>→><→<"→"'→'
Usage Example:
escapeEntities: {
'{': '{',
'}': '}'
}