项目作者: vzhou842

项目描述 :
Add headers (like filenames) to code blocks for Gatsby.js.
高级语言: JavaScript
项目地址: git://github.com/vzhou842/gatsby-remark-code-headers.git
创建时间: 2019-04-21T20:59:10Z
项目社区:https://github.com/vzhou842/gatsby-remark-code-headers

开源协议:MIT License

下载


gatsby-remark-code-headers

Adds a customizeable header, like a filename, to code blocks for Gatsby.js.

Build Status npm

Example

See this plugin being used live at victorzhou.com (source code).

Installation

You must be already using gatsby-transformer-remark. To install, run

  1. $ npm install --save-dev gatsby-remark-code-headers

Then, in gatsby-config.js, update your options for gatsby-transformer-remark:

  1. plugins: [
  2. {
  3. resolve: 'gatsby-transformer-remark',
  4. options: {
  5. plugins: [
  6. {
  7. resolve: 'gatsby-remark-code-headers',
  8. options: {
  9. className: 'optional-custom-class-name'
  10. }
  11. }
  12. ]
  13. }
  14. }
  15. ]

Usage

In your Markdown file, add a header comment to the first line of any code block:

  1. ### Code
  2. ```js
  3. // Header: filename.js
  4. console.log('This is filename.js');
  5. ```
  6. ```python
  7. # Header: This is a Python file
  8. print('Hello World!')
  9. ```

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:

  1. ### Code
  2. <div class="gatsby-code-header"><h5>filename.js</h5></div>
  3. ```js
  4. console.log('This is filename.js');
  5. ```
  6. <div class="gatsby-code-header"><h5>This is a Python file</h5></div>
  7. ```python
  8. print('Hello World!')
  9. ```

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:

  1. .gatsby-code-header {
  2. margin: 10px 0 0 0;
  3. }
  4. .gatsby-code-header h5 {
  5. display: inline-block;
  6. margin: 0;
  7. padding: 2px 20px;
  8. background-color: rgb(245, 242, 240);
  9. border-top-left-radius: 5px;
  10. border-top-right-radius: 5px;
  11. border-bottom: 1px solid gray;
  12. }