https://github.com/lwhiteley/remarkable-codegroup
remarkable plugin to put code blocks into groups
https://github.com/lwhiteley/remarkable-codegroup
codegroup markdown markdown-to-html remarkable remarkable-plugin
Last synced: 3 months ago
JSON representation
remarkable plugin to put code blocks into groups
- Host: GitHub
- URL: https://github.com/lwhiteley/remarkable-codegroup
- Owner: lwhiteley
- License: mit
- Created: 2017-09-19T15:45:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-21T18:00:24.000Z (over 7 years ago)
- Last Synced: 2025-02-24T22:24:06.042Z (4 months ago)
- Topics: codegroup, markdown, markdown-to-html, remarkable, remarkable-plugin
- Language: JavaScript
- Size: 10.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# remarkable-codegroup
[](https://badge.fury.io/js/remarkable-codegroup)
remarkable plugin to put code blocks into groups
## Getting Started
```shell
npm i --save remarkable-codegroup
```
```js
const Remarkable = require('remarkable');
const markdown = new Remarkable(opts)
const codeGroup = require('remarkable-codegroup');
markdown.use(codeGroup);
```
## Description
This plugin creates a codegroup in the html syntax for the following:
- [Bootstrap 3 Tabs](https://getbootstrap.com/docs/3.3/javascript/#tabs)
- `requires`: jQuery, Boostrap 3 (js, css)
### Syntax
The syntax below denotes how the markdown should look in order to group code blocks
[codegroup]
```js
const docFolder = 'source/docs'
const docPath = `./${docFolder}`;
const fileGlob = '**/*.md'
const publicFolder = 'public';
const htmlTemplate = fs.readFileSync('source/doc.template.html', 'utf8')
```
```js::sdk
const docFolder = 'source/docs'
const docPath = `./${docFolder}`;
const fileGlob = '**/*.md'
const publicFolder = 'public';
```
```swift
func application(_ application: UIApplication) -> Bool {
sampleApp = SampleApplication()
return true
}
```
[/codegroup]
### Preview
**Please Note:** The dark theme in this example is a custom style. Styles can be customized however you see fit.
### Custom Named Tabs
As seen in the example above, tabs can have custom names for situations where you may need to group the same language and need to differentiate them.
The example above shows a code block `js::sdk`, where `js` is the language syntax to be used and `sdk` denotes the name to be seen in the tab; we use `::` to separate both terms.
Similar Projects
- [gitbook-plugin-codegroup](https://github.com/lwhiteley/gitbook-plugin-codegroup)
Notes:
- Pull requests are welcome