Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fuxingloh/remark-code-import-replace
Remark to import code block and optionally replace the code block to another syntax tree.
https://github.com/fuxingloh/remark-code-import-replace
code codeblock markdown remark snippet typescript
Last synced: 18 days ago
JSON representation
Remark to import code block and optionally replace the code block to another syntax tree.
- Host: GitHub
- URL: https://github.com/fuxingloh/remark-code-import-replace
- Owner: fuxingloh
- License: mit
- Created: 2020-12-21T08:31:10.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-21T09:03:20.000Z (about 4 years ago)
- Last Synced: 2024-12-17T12:56:49.167Z (22 days ago)
- Topics: code, codeblock, markdown, remark, snippet, typescript
- Language: TypeScript
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Remark Code Import Replace [](https://www.npmjs.com/package/remark-code-import-replace)
[](https://github.com/fuxingloh/vue-horizontal/blob/main/LICENSE)
Remark code file import and optionally replace the code block.
## Basic usage
```js import=code.js
```
## Code import and replace node
> `replace` will only run if `import=` is set.
```js import=code.js render param
```
### Remark options
```js
export default {
remark: ['remark-code-import-replace', {
// optionally override baseDir
baseDir: '/snippets',
replace: (node, meta, {u}) => {
// Access any meta declared in codeblock
if (meta.param) {
return [node]
}
// e.g. to wraped into another component
if (meta.render) {
return [
u('html', {value: `
`}),
node,
u('html', {value: ``}),
]
}
},
}]
}
```
## Using with Nuxt Content and Components
- Code file import
- Register a new directory for global import
- Replace and add a new node with the name of the component
```js
// nuxt.config.js
export default {
content: {
markdown: {
remarkPlugins: [
['remark-code-import-replace', {
replace: (node, meta, {u}) => {
return [
u('html', {value: `<${meta.file.name}>`}),
u('html', {value: `${meta.file.name}>`}),
node,
]
}
}]
],
},
},
hooks: {
'components:dirs': async (dirs) => {
dirs.push({
path: "~/content",
global: true
})
}
}
}
```