npmpackage.info

Gathering detailed insights and metrics for rehype-code-titles

rehype-code-titles - 1.2.0 | npmpackage.info

rehype-code-titles

Rehype plugin for parsing code blocks and adding titles to code blocks

1.2.0

MIT

JavaScript

11.48 kB

3.1

Installations

npm install rehype-code-titles

Developer Guide

BETA

Typescript

No

Module System

ESM

Min. Node Version

>=16

Node Version

16.19.0

NPM Version

8.19.3 Pull Requests

Open

9

Total

252

Closed

226

Merged

17

Issues

Open

1

Total

4

Closed

3

Releases

Unable to fetch releases

Languages

JavaScript

TypeScript

Shell

JavaScript (44.57%)

TypeScript (31.56%)

Shell (23.87%)

Developer

rockchalkwushock

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

22 Stars

53 Commits

2 Forks

2 Watchers

12 Branches

1 Contributors

Updated on Feb 12, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.2.0

Package Id

rehype-code-titles@1.2.0

Unpacked Size

11.48 kB

Size

4.63 kB

File Count

NPM Version

8.19.3

Node Version

16.19.0

Published on

Feb 15, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

hast unist-util-visit

Dev Dependencies

@arkweid/lefthook @babel/core @babel/plugin-transform-modules-commonjs @rockchalkwushock/eslint-config @types/dedent @types/hast @types/jest @types/node @types/unist dedent eslint jest prettier rehype standard-version typescript

rehype-code-titles

Rehype plugin for parsing code blocks and adding titles to code blocks

Why?

I moved my blog over to using mdx-bundler which uses xdm under the hood to parse the markdown and MDX files. I was using remark-code-titles prior to this move and unfortunately it no longer worked. I believe this was because of the order plugins were being applied internally for xdm. I'd never really worked with remark or rehype directly before and didn't have a lot of experience with ASTs so this was a fun little project that I initially built directly into my blog before pulling it out at a plugin to ship to other developers.

Many thanks to @mottox2, @mapbox, & @wooorm for their prior work in this ecosystem it was of great help when creating this plugin.

Installation

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

1npm install rehype-code-titles
2
3yarn add rehype-code-titles
4
5pnpm add rehype-code-titles

API

This package exports no identifiers. The default export is rehypeCodeTitles

`rehype().use(rehypeCodeTitles[, options])`

Add support for stripping out code titles from input.

`options`

`options.customClassName`

Specify your own custom css class name to apply. Defaults to rehype-code-title. Note: you will have to write the CSS implementation yourself.

For example

1// some global css file
2.rehype-code-title {
3  margin-bottom: -0.6rem;
4  padding: 0.5em 1em;
5  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
6    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
7    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier,
8    monospace;
9
10  background-color: black;
11  color: white;
12  z-index: 0;
13
14  border-top-left-radius: 0.3em;
15  border-top-right-radius: 0.3em;
16}

`options.titleSeparator`

Specify the title separator for rehype-code-title. Defaults to: :.

1// default behavior will be
2'language-typescript:lib/mdx.ts' // the title will be lib/mdx.ts
3'language-typescript:title=lib/mdx.ts' // title will be title=lib/mdx.ts
4
5// titleSeparator set to :title=
6'language-typescript:lib/mdx.ts' // Wont work! 😱. Does not match the separator
7'language-typescript:title=lib/mdx.ts' // title will be lib/mdx.ts

Input

1## Code Example
2
3```typescript:lib/mdx.ts
4// code here
5```

Output

1<div class="rehype-code-title">lib/mdx.ts</div>
2<pre>
3  <code class="language-typescript">
4  <!-- HTML parse code here -->
5  </code>
6</pre>

Usage

Use this package as a rehype plugin.

1const rehype = require('rehype')
2const rehypeCodeTitles = require('rehype-code-titles')
3const rehypePrism = require('@mapbox/rehype-prism')
4
5rehype()
6  .use(rehypeCodeTitles) // should always be before rehypePrism.
7  .use(rehypePrism)
8  .process(/* some html */)

1const unified = require('unified')
2const rehypeParse = require('rehype-parse')
3const rehypeCodeTitles = require('rehype-code-titles')
4const rehypePrism = require('@mapbox/rehype-prism')
5
6unified()
7  .use(rehypeParse)
8  .use(rehypeCodeTitles)
9  .use(rehypePrism)
10  .processSync(/* some html */)

Development

This repository makes use of @arkweid/lefthook and will run eslint, jest, and prettier against all staged files.

1git clone https://github.com/rockchalkwushock/rehype-code-titles.git
2cd rehype-code-titles
3pnpm i
4# Do cool stuff with code
5git add .
6git commit -m "feat(src): a cool new feature"
7# pre-commit hooks run: eslint, jest, and prettier
8git push

Contributing

Please visit CONTRIBUTING.md

License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Cody Brunner}
💻 📖 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/feature.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/feature.yml/production?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/feature.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/feature.yml/production?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/feature.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/feature.yml/production?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/feature.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/feature.yml/production?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/release.yml/production?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/release.yml/production?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/release.yml/production?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/release.yml/production?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/release.yml/production?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/staging.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/staging.yml/production?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/staging.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/staging.yml/production?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/staging.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/staging.yml/production?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/staging.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/rockchalkwushock/rehype-code-titles/staging.yml/production?enable=pin
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 7 third-party GitHubAction dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

3.1

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More