ice-zjchen/remark-codeset

Transform sets of code blocks in markdown to tablist in html (new node type, rehype compatible)

remark-codeset

Adds syntax to parse sets of code blocks in markdown. Transforms them to tablist.

Live demo: https://codepen.io/ice-zjchen/full/dybevYP

Intro

This repository contains the following projects:

• remark-codeset A remark plugin used in the remark processor powered by @unified collective.
• gatsby-remark-codeset A sub-plugin of gatsby-transformer-remark plugin used in gatsby.
• remark-codeset-core Core libs including tokenize, parser, etc.

Syntax

~~~codeset
```html
<div>Hello CodeSet</div>
```

```css
div {
  font-size: 32px;
}
```

```js
console.log('I am remark-codeset');
```
~~~

remark-codeset's Issues

Tabs not getting displayed when clicked

I'm using the gatsby-remark-codeset plugin and I'm trying to troubleshoot a situation where the 1st tab is displayed correctly but any other tab doesn't get displayed when clicking on them.

My gatsby-config.js looks like this:
plugins: [ 'gatsby-plugin-react-helmet', 'gatsby-plugin-styled-components', { resolve: 'gatsby-transformer-remark', options: { plugins: [ 'gatsby-remark-codeset', 'gatsby-remark-autolink-headers', { resolve: 'gatsby-remark-prismjs', options: { classPrefix: 'language-', }, }, ...

My Markdown file looks like this:

`

```java
    ...
```

```javascript
    ...
```

`

Any ideas here are appreciated.

Thanks