@fsegurai/marked-extended-tabs v15.1.1

A library of extended typographic features for Marked.js.

@fsegurai/marked-extended-tabs is an extensions for Marked.js that adds support for extended typographic characters to easily translate plain ASCII punctuation characters into "smart" typographic punctuation HTML entities.

Table of contents

• Installation
• Usage
  • Basic Usage
    • Aliases
    • Configuration Options
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

To add @fsegurai/marked-extended-tabs along with Marked.js to your package.json use the following commands.

bun install @fsegurai/marked-extended-tabs marked@^15.0.0 --save

Usage

Basic Usage

Import @fsegurai/marked-extended-tabs and apply it to your Marked instance as shown below.

import { marked } from "marked";
import markedExtendedTabs from "@fsegurai/marked-extended-tabs";

// or UMD script
// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-tabs/lib/index.umd.js"></script>

marked.use(markedExtendedTabs());

const exampleMarkdown = `
:::tabs
::tab{label="JavaScript"}
\`\`\`
console.log("Hello from JS");
\`\`\`
::

::tab{label="Python"}
\`\`\`python
print("Hello from Python")
\`\`\`
::
:::
`;

marked.parse(exampleMarkdown);

Aliases

The tabs block can be rendered using alternative aliases respectively for start and end block. Some of them are:

• Tab Block

  • Start Aliases
    • :tb
    • :tabs
  • End Aliases
    • :tbend
    • :tabsend

• Tab Item Block

  • Start Aliases
    • :t
    • :tab
  • End Aliases
    • :tend
    • :tabend

Configuration Options

The marked-extended-tabs extension supports the following configuration options:

• className: The base CSS class name for accordions. Defaults to 'marked-extended-accordion.'
• persistSelection: Whether to persist tab selection between page loads. Defaults to 'true.'
• animation: Animation type. Defaults to 'fade.'
  • fade
  • slide
  • none
• autoActivate: Automatically activate the first tab if none is marked active. Defaults to 'true.'
• template: A custom template for the accordion HTML. Defaults to the built-in template.
• customizeToken: A function that allows you to customize the token object. Defaults to null.
• injectStyles: A boolean value that determines whether to inject default styles. Defaults to true.

Tab syntax parameters:

• label: The label for the tab. This is required.
• active: A boolean value that indicates whether the tab should be active by default. Default is false.
• icon: An icon to be displayed on the tab. This is optional.

Available Extensions

Extension	Package	Version	Description
Accordion	@fsegurai/marked-extended-accordion		Add collapsible accordion sections to your markdown
Alert	@fsegurai/marked-extended-alert		Create styled alert boxes for important information
Footnote	@fsegurai/marked-extended-footnote		Add footnotes with automatic numbering
Lists	@fsegurai/marked-extended-lists		Enhanced list formatting options
Spoiler	@fsegurai/marked-extended-spoiler		Hide content behind spoiler tags
Tables	@fsegurai/marked-extended-tables		Advanced table formatting with cell spanning
Tabs	@fsegurai/marked-extended-tabs		Create tabbed content sections
Timeline	@fsegurai/marked-extended-timeline		Display content in an interactive timeline format
Typographic	@fsegurai/marked-extended-typographic		Improve typography with smart quotes, dashes, and more

Demo Application

To see all extensions in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.