Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vzhou842/gatsby-remark-code-headers
Add headers (like filenames) to code blocks for Gatsby.js.
https://github.com/vzhou842/gatsby-remark-code-headers
gatsby gatsby-plugin gatsby-remark gatsby-remark-plugin gatsbyjs markdown
Last synced: 29 days ago
JSON representation
Add headers (like filenames) to code blocks for Gatsby.js.
- Host: GitHub
- URL: https://github.com/vzhou842/gatsby-remark-code-headers
- Owner: vzhou842
- License: mit
- Created: 2019-04-21T20:59:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-05-13T16:14:41.000Z (over 5 years ago)
- Last Synced: 2024-10-01T15:59:51.613Z (about 1 month ago)
- Topics: gatsby, gatsby-plugin, gatsby-remark, gatsby-remark-plugin, gatsbyjs, markdown
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-remark-code-headers
- Size: 178 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-remark-code-headers
Adds a customizeable header, like a filename, to code blocks for Gatsby.js.
[](https://travis-ci.com/vzhou842/gatsby-remark-code-headers) 
See this plugin being used live at [victorzhou.com](https://victorzhou.com/blog/build-an-io-game-part-1/) ([source code](https://github.com/vzhou842/victorzhou.com)).
## Installation
You must be already using [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/). To install, run
```bash
$ npm install --save-dev gatsby-remark-code-headers
```
Then, in `gatsby-config.js`, update your options for `gatsby-transformer-remark`:
```js
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-code-headers',
options: {
className: 'optional-custom-class-name'
}
}
]
}
}
]
```
## Usage
In your Markdown file, add a **header comment** to the first line of any code block:
~~~markdown
### Code
```js
// Header: filename.js
console.log('This is filename.js');
```
```python
# Header: This is a Python file
print('Hello World!')
```
~~~
**The header comment must be formatted exactly like one of the examples above**. This plugin will replace the header comment with HTML for the header. It effectively transforms the above markdown into this:
~~~markdown
### Code
filename.js
```js
console.log('This is filename.js');
```
This is a Python file
```python
print('Hello World!')
```
~~~
### Styling
Once your integration works, you'll probably want to style the code header. Here's some example CSS you can use as a starting point:
```css
.gatsby-code-header {
margin: 10px 0 0 0;
}
.gatsby-code-header h5 {
display: inline-block;
margin: 0;
padding: 2px 20px;
background-color: rgb(245, 242, 240);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 1px solid gray;
}
```