# gatsby-remark-code-titles

> [![CircleCI](https://circleci.com/gh/DSchau/gatsby-remark-code-titles.svg?style=svg)](https://circleci.com/gh/DSchau/gatsby-remark-code-titles)

Latest version **1.1.0** (published 2019-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-remark-code-titles
pnpm add gatsby-remark-code-titles
yarn add gatsby-remark-code-titles
bun add gatsby-remark-code-titles
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-05-13 |
| First published | 2018-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dustin Schau |
| Maintainers | dschau |
| Keywords | gatsby, gatsby-plugin, gatsby-remark-plugin |

## Links

- npm: https://www.npmjs.com/package/gatsby-remark-code-titles
- npm.io page: https://npm.io/package/gatsby-remark-code-titles

## Dependencies (2)

- [query-string](https://npm.io/package/query-string.md) ~6.0.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ~1.3.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-05-13
- 1.1.0-meta-fix.0 (meta-fix) — 2019-09-26
- 1.1.0-rc.0 — 2019-02-25
- 1.0.2 — 2018-04-05
- 1.0.1 — 2018-04-05
- 1.0.0 — 2018-04-04

## README

# gatsby-remark-code-titles

[![CircleCI](https://circleci.com/gh/DSchau/gatsby-remark-code-titles.svg?style=svg)](https://circleci.com/gh/DSchau/gatsby-remark-code-titles)

Adds a code title to code snippets

![Code title example](./example/code-title.png)

## Install

```bash
npm install gatsby-remark-code-titles --save-dev
```

## How to use

in your gatsby-config.js

```js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-code-titles',
          options: {
            className: 'your-custom-class-name',
          },
        }, // IMPORTANT: this must be ahead of other plugins that use code blocks
      ],
    },
  },
];
```

### Include CSS

Now that we've injected the custom title, we need to style it! This presumes standard Gatsby prism highlighting, but tweak to your heart's content.

```css
.gatsby-remark-code-title {
  margin-bottom: -0.6rem;
  padding: 0.5em 1em;
  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier,
    monospace;

  background-color: black;
  color: white;
  z-index: 0;

  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}
```

### Usage in Markdown

in your Markdown content

````
```js:title=example-file.js
alert('how cool is this!');
```js
````

This plugin will parse the Markdown AST, pluck the title, and then "clean" the code snippet language for further processing. In other words, the plugin will create the following structure, injecting a custom `div` with the title:

````
<div class="gatsby-code-title">example-file.js</div>
```js
alert('how cool is this');
```
````

---
_Source: https://npm.io/package/gatsby-remark-code-titles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._