-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 3b5088f
Showing
10 changed files
with
479 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
.DS_Store | ||
node_modules | ||
*.log | ||
.temp | ||
TODOs.md | ||
.vscode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
# Markdown-it Vuepress Code Snippet Enhanced | ||
|
||
|
||
## Why use this plugin? | ||
|
||
- Specify your own language :boom: | ||
- Transclude any part of a file :boom: | ||
- Line highlighting extended from Vuepress :green_heart: | ||
|
||
<br /> | ||
|
||
## Install | ||
|
||
```sh | ||
npm i -D markdown-it-vuepress-code-snippet-enhanced | ||
``` | ||
|
||
--- | ||
<br /> | ||
|
||
## Setup | ||
|
||
In Vuepress `config.js` add the following: | ||
|
||
```js | ||
markdown: { | ||
config: md => { | ||
md.use(require('markdown-it-vuepress-code-snippet-enhanced')) | ||
} | ||
} | ||
``` | ||
|
||
You can now import code snippets into your markdown files with the following syntax: | ||
|
||
```md | ||
@[code](@/docs/code.js) | ||
@[code lang=ruby transclude={1-1}](@/docs/code.rb) | ||
@[code highlight={1-6} transcludeTag=style](@/docs/code.vue) | ||
@[code highlight={4,9,11-16} transcludeWith=:::](@/docs/code.vue) | ||
``` | ||
|
||
|
||
|
||
## Options | ||
|
||
### Language | ||
You can specify any language for syntax highlighting as follows: | ||
```md | ||
@[code lang=ruby](@/docs/code.rb) | ||
@[code lang=csharp](@/docs/code.cs) | ||
``` | ||
_Vuepress uses prismjs, so for proper syntax highlighting check prism.js docs._ | ||
|
||
<br/> | ||
|
||
### Transclusion | ||
You can transclude a single or multiple parts of a file using `transclude`, `transcludeWith`, or `transcludeTag`. | ||
|
||
#### transcludeWith | ||
For transcluding one or more parts of a file using comment lines and specify a unique pattern. | ||
```md | ||
@[code lang=ruby transcludeWith=|_|_|](@/docs/code.rb) | ||
@[code transcludeWith=:::](@/docs/code.js) | ||
@[code transcludeWith=++++](@/docs/code.h) | ||
``` | ||
##### Example | ||
```rb | ||
require 'lib' | ||
require 'other' | ||
|
||
# |_|_| | ||
def hello | ||
puts 'hello' | ||
puts 'vue' | ||
end | ||
# |_|_| | ||
``` | ||
|
||
#### transcludeTag | ||
Useful when working `Vue` single file components. | ||
```md | ||
@[code transcludeTag=template](@/docs/code.vue) | ||
@[code transcludeTag=script](@/docs/code.vue) | ||
@[code transcludeTag=style](@/docs/code.vue) | ||
``` | ||
|
||
#### transclude | ||
Use a range indicating the `start` and `end` lines. This option is inclusive. | ||
```md | ||
@[code transclude={5-13}](@/docs/code.js) | ||
``` | ||
|
||
|
||
## Sample | ||
|
||
### Input Markdown | ||
``` | ||
@[code highlight={1-6} transcludeTag=style](@/docs/code.vue) | ||
``` | ||
|
||
### Source File | ||
```html | ||
<template> | ||
<div class="component"></div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
mounted () { | ||
alert('yay!') | ||
} | ||
} | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.component { | ||
display: flex; | ||
} | ||
</style> | ||
``` | ||
### Rendered Output | ||
|
||
```css | ||
<style lang="scss" scoped> | ||
.component { | ||
display: flex; | ||
} | ||
</style> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
module.exports = function autolink(state, silent) { | ||
var tail, linkMatch, emailMatch, url, fullUrl, token, | ||
pos = state.pos; | ||
|
||
if (state.src.charCodeAt(pos) !== 0x3C /* < */ ) { | ||
return false; | ||
} | ||
|
||
tail = state.src.slice(pos); | ||
|
||
if (tail.indexOf('>') < 0) { | ||
return false; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const codeSnippet = require('./src/plugin') | ||
|
||
module.exports = codeSnippet |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"name": "markdown-it-import", | ||
"version": "1.0.0", | ||
"description": "", | ||
"main": "index.js", | ||
"scripts": { | ||
"dev": "node index.js", | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
}, | ||
"keywords": [], | ||
"author": "Fabio Anselmo <[email protected]>", | ||
"license": "MIT", | ||
"devDependencies": { | ||
"markdown-it": "^8.4.2", | ||
"markdown-it-prism": "^2.0.1" | ||
} | ||
} |
Oops, something went wrong.