├── __tests__ ├── mocks │ └── style.js ├── setup.js ├── plugins │ ├── markdown-it-emoji.spec.js │ ├── markdown-it-sub.spec.js │ ├── markdown-it-sup.spec.js │ ├── markdown-it-ins.spec.js │ ├── markdown-it-mark.spec.js │ ├── markdown-it-abbr.spec.js │ ├── markdown-it-anchor.spec.js │ ├── markdown-it-task-lists.spec.js │ ├── markdown-it-highlightjs.spec.js │ ├── markdown-it-toc-done-right.spec.js │ ├── markdown-it-deflist.spec.js │ ├── markdown-it-footnote.spec.js │ └── markdown-it.spec.js └── render.js ├── .npmignore ├── logo.png ├── babel.config.js ├── .travis.yml ├── .prettierrc.json ├── src ├── index.js └── vue-markdown-it.js ├── jest.config.js ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── dependabot.yml ├── LICENSE ├── package.json ├── .gitignore ├── CHANGELOG.md └── README.md /__tests__/mocks/style.js: -------------------------------------------------------------------------------- 1 | export default {}; 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /**/* 2 | !dist/**/* 3 | !LICENSE.md 4 | !package*.json 5 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JanGuillermo/vue3-markdown-it/HEAD/logo.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'] 3 | }; 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 14 4 | 5 | after_success: bash <(curl -s https://codecov.io/bash) 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": true, 4 | "tabWidth": 2, 5 | "trailingComma": "none" 6 | } 7 | -------------------------------------------------------------------------------- /__tests__/setup.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import VueMarkdownIt from '@/vue-markdown-it'; 3 | 4 | beforeEach(() => { 5 | global.wrapper = mount(VueMarkdownIt); 6 | }); 7 | 8 | afterAll(() => { 9 | delete global.wrapper; 10 | }); 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VueMarkdownIt from './vue-markdown-it'; 2 | 3 | const install = (Vue) => { 4 | Vue.component(VueMarkdownIt.name, VueMarkdownIt); 5 | }; 6 | 7 | if (typeof window !== 'undefined' && window.Vue) { 8 | install(window.Vue); 9 | } 10 | 11 | VueMarkdownIt.install = install; 12 | 13 | export default VueMarkdownIt; 14 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | collectCoverage: true, 3 | collectCoverageFrom: ['src/vue-markdown-it.js'], 4 | coverageDirectory: 'coverage', 5 | moduleNameMapper: { 6 | '\\.(css)$': '/__tests__/mocks/style.js', 7 | '#(.*)': '/__tests__/$1' 8 | }, 9 | preset: '@vue/cli-plugin-unit-jest', 10 | setupFilesAfterEnv: ['/__tests__/setup.js'], 11 | testMatch: ['**/__tests__/**/*.spec.[jt]s?(x)'] 12 | }; 13 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-emoji.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-emoji tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support emojis', async () => { 7 | source = ':tada:'; 8 | result = render(source); 9 | 10 | await global.wrapper.setProps({ source }); 11 | expect(global.wrapper.html()).toContain(result); 12 | expect(global.wrapper.text()).toEqual('🎉'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-sub.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-sub tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support subscript', async () => { 7 | source = 'H~2~0'; 8 | result = render(source); 9 | 10 | await global.wrapper.setProps({ source }); 11 | expect(global.wrapper.html()).toContain(result); 12 | expect(global.wrapper.html()).toContain(''); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-sup.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-sup tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support superscript', async () => { 7 | source = '29^th^'; 8 | result = render(source); 9 | 10 | await global.wrapper.setProps({ source }); 11 | expect(global.wrapper.html()).toContain(result); 12 | expect(global.wrapper.html()).toContain(''); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-ins.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-ins tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support tags', async () => { 7 | source = '++inserted++'; 8 | result = render(source); 9 | 10 | await global.wrapper.setProps({ source }); 11 | expect(global.wrapper.html()).toContain(result); 12 | expect(global.wrapper.html()).toContain(''); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-mark.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-mark tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support tags', async () => { 7 | source = '==marked=='; 8 | result = render(source); 9 | 10 | await global.wrapper.setProps({ source }); 11 | expect(global.wrapper.html()).toContain(result); 12 | expect(global.wrapper.html()).toContain(''); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-abbr.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-abbr tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support abbreviations', async () => { 7 | source = ` 8 | *[D4C]: Dirty Deeds Done Dirt Cheap 9 | D4C is such a bizarre stand. 10 | `; 11 | result = render(source); 12 | 13 | await global.wrapper.setProps({ source }); 14 | expect(global.wrapper.html()).toContain(result); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-anchor.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-anchor tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support anchors', async () => { 7 | source = ` 8 | # First header 9 | Lorem ipsum. 10 | `; 11 | result = render(source); 12 | 13 | await global.wrapper.setProps({ source }); 14 | expect(global.wrapper.html()).toContain(result); 15 | expect(global.wrapper.html()).toContain('first-header'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-task-lists.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-task-lists tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support task lists', async () => { 7 | source = ` 8 | - [ ] unchecked 9 | - [x] checked 10 | `; 11 | result = render(source); 12 | 13 | await global.wrapper.setProps({ source }); 14 | expect(global.wrapper.html()).toContain(result); 15 | expect(global.wrapper.html()).toContain('checkbox'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-highlightjs.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-highlightjs tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support highlighting', async () => { 7 | source = ` 8 | \`\`\` 9 | this is code 10 | \`\`\` 11 | 12 | this isn't code 13 | `; 14 | result = render(source); 15 | 16 | await global.wrapper.setProps({ source }); 17 | expect(global.wrapper.html()).toContain(result); 18 | expect(global.wrapper.html()).toContain('hljs'); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-toc-done-right.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-toc-done-right tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support table of contents', async () => { 7 | source = ` 8 | [[toc]] 9 | 10 | # First heading 11 | Swag 12 | 13 | ## Second heading 14 | Awesome sauce! 15 | `; 16 | result = render(source); 17 | 18 | await global.wrapper.setProps({ source }); 19 | expect(global.wrapper.html()).toContain(result); 20 | expect(global.wrapper.html()).toContain('table-of-contents'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | jest: true, 5 | node: true 6 | }, 7 | extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'prettier'], 8 | parserOptions: { 9 | parser: '@babel/eslint-parser' 10 | }, 11 | plugins: ['prettier'], 12 | rules: { 13 | 'prettier/prettier': [ 14 | 'error', 15 | { 16 | endOfLine: 'auto' 17 | } 18 | ] 19 | }, 20 | overrides: [ 21 | { 22 | files: ['**/__tests__/*.{j,t}s?(x)', '**/__tests__/**/*.spec.{j,t}s?(x)'], 23 | env: { 24 | jest: true 25 | } 26 | } 27 | ] 28 | }; 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Additional context** 27 | Add any other context about the problem here. 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-deflist.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-deflist tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support definition lists', async () => { 7 | source = ` 8 | First Term 9 | : This is the definition of the first term. 10 | 11 | Second Term 12 | : This is one definition of the second term. 13 | : This is another definition of the second term. 14 | `; 15 | result = render(source); 16 | 17 | await global.wrapper.setProps({ source }); 18 | expect(global.wrapper.html()).toContain(result); 19 | expect(global.wrapper.html()).toContain(''); 20 | expect(global.wrapper.html()).toContain(''); 21 | expect(global.wrapper.html()).toContain(''); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it-footnote.spec.js: -------------------------------------------------------------------------------- 1 | import render from '#/render'; 2 | 3 | describe('markdown-it-footnote tests', () => { 4 | let source, result; 5 | 6 | it('should be able to support footnotes', async () => { 7 | source = ` 8 | Here is a footnote reference,[^1] and another.[^longnote] 9 | 10 | [^1]: Here is the footnote. 11 | 12 | [^longnote]: Here's one with multiple blocks. 13 | 14 | Subsequent paragraphs are indented to show that they 15 | belong to the previous footnote. 16 | `; 17 | result = render(source); 18 | 19 | await global.wrapper.setProps({ source }); 20 | expect(global.wrapper.html()).toContain(result); 21 | expect(global.wrapper.html()).toContain('footnote-ref'); 22 | expect(global.wrapper.html()).toContain('footnote-backref'); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2020 Jan Guillermo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /__tests__/plugins/markdown-it.spec.js: -------------------------------------------------------------------------------- 1 | import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt'; 2 | import render from '#/render'; 3 | 4 | describe('markdown-it tests', () => { 5 | let source, result; 6 | 7 | it('should initialize properly', async () => { 8 | expect(global.wrapper.text()).toEqual(''); 9 | }); 10 | 11 | it('should update with "

Hello World!

"', async () => { 12 | source = '## Hello World!'; 13 | result = render(source); 14 | 15 | await global.wrapper.setProps({ source }); 16 | expect(global.wrapper.html()).toContain(result); 17 | }); 18 | 19 | it('should be able to support external plugins', async () => { 20 | source = '--Strikeout--'; 21 | result = render(source); 22 | 23 | await global.wrapper.setProps({ source }); 24 | expect(global.wrapper.html()).toContain(result); 25 | expect(global.wrapper.html()).not.toContain(''); 26 | 27 | const plugins = [ 28 | { 29 | plugin: MarkdownItStrikethroughAlt 30 | } 31 | ]; 32 | await global.wrapper.setProps({ source, plugins }); 33 | expect(global.wrapper.html()).toContain(''); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /__tests__/render.js: -------------------------------------------------------------------------------- 1 | import MarkdownIt from 'markdown-it'; 2 | import MarkdownItAbbr from 'markdown-it-abbr'; 3 | import MarkdownItAnchor from 'markdown-it-anchor'; 4 | import MarkdownItDeflist from 'markdown-it-deflist'; 5 | import MarkdownItEmoji from 'markdown-it-emoji'; 6 | import MarkdownItFootnote from 'markdown-it-footnote'; 7 | import MarkdownItHighlightjs from 'markdown-it-highlightjs'; 8 | import MarkdownItIns from 'markdown-it-ins'; 9 | import MarkdownItMark from 'markdown-it-mark'; 10 | import MarkdownItSub from 'markdown-it-sub'; 11 | import MarkdownItSup from 'markdown-it-sup'; 12 | import MarkdownItTasklists from 'markdown-it-task-lists'; 13 | import MarkdownItTOC from 'markdown-it-toc-done-right'; 14 | 15 | const md = new MarkdownIt(); 16 | const render = (source) => md.render(source); 17 | 18 | md.use(MarkdownItAbbr) 19 | .use(MarkdownItAnchor) 20 | .use(MarkdownItDeflist) 21 | .use(MarkdownItEmoji) 22 | .use(MarkdownItFootnote) 23 | .use(MarkdownItHighlightjs) 24 | .use(MarkdownItIns) 25 | .use(MarkdownItMark) 26 | .use(MarkdownItSub) 27 | .use(MarkdownItSup) 28 | .use(MarkdownItTasklists) 29 | .use(MarkdownItTOC); 30 | 31 | export default render; 32 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | open-pull-requests-limit: 10 8 | ignore: 9 | - dependency-name: markdown-it 10 | versions: 11 | - 12.0.5 12 | - dependency-name: eslint-config-prettier 13 | versions: 14 | - 7.2.0 15 | - 8.0.0 16 | - 8.2.0 17 | - dependency-name: eslint 18 | versions: 19 | - 7.18.0 20 | - 7.19.0 21 | - 7.20.0 22 | - 7.22.0 23 | - 7.24.0 24 | - dependency-name: vue 25 | versions: 26 | - 3.0.10 27 | - 3.0.9 28 | - dependency-name: husky 29 | versions: 30 | - 4.3.8 31 | - 5.0.9 32 | - 5.1.0 33 | - 5.1.1 34 | - 5.1.2 35 | - 5.2.0 36 | - dependency-name: "@vue/test-utils" 37 | versions: 38 | - 2.0.0-rc.0 39 | - 2.0.0-rc.1 40 | - 2.0.0-rc.2 41 | - dependency-name: typescript 42 | versions: 43 | - 4.1.3 44 | - 4.1.4 45 | - 4.1.5 46 | - 4.2.2 47 | - dependency-name: eslint-plugin-vue 48 | versions: 49 | - 7.5.0 50 | - 7.6.0 51 | - dependency-name: markdown-it-anchor 52 | versions: 53 | - 7.0.1 54 | - 7.0.2 55 | - dependency-name: eslint-plugin-prettier 56 | versions: 57 | - 3.3.1 58 | - dependency-name: markdown-it-ins 59 | versions: 60 | - 3.0.1 61 | - dependency-name: markdown-it-mark 62 | versions: 63 | - 3.0.1 64 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-markdown-it", 3 | "version": "1.0.10", 4 | "author": "Jan Guillermo", 5 | "description": "An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!", 6 | "license": "MIT", 7 | "keywords": [ 8 | "vue", 9 | "vue3", 10 | "vue3-markdown-it", 11 | "markdown", 12 | "markdown-it" 13 | ], 14 | "main": "dist/vue3-markdown-it.umd.min.js", 15 | "scripts": { 16 | "build": "vue-cli-service build --formats umd-min --target lib ./src/index.js", 17 | "lint": "vue-cli-service lint", 18 | "test": "vue-cli-service test:unit", 19 | "prepublishOnly": "npm run test && npm run build" 20 | }, 21 | "dependencies": { 22 | "markdown-it": "^12.3.2", 23 | "markdown-it-abbr": "^1.0.4", 24 | "markdown-it-anchor": "^8.4.1", 25 | "markdown-it-deflist": "^2.1.0", 26 | "markdown-it-emoji": "^2.0.0", 27 | "markdown-it-footnote": "^3.0.3", 28 | "markdown-it-highlightjs": "^3.6.0", 29 | "markdown-it-ins": "^3.0.1", 30 | "markdown-it-mark": "^3.0.1", 31 | "markdown-it-sub": "^1.0.0", 32 | "markdown-it-sup": "^1.0.0", 33 | "markdown-it-task-lists": "^2.1.1", 34 | "markdown-it-toc-done-right": "^4.2.0" 35 | }, 36 | "devDependencies": { 37 | "@babel/eslint-parser": "^7.16.5", 38 | "@vue/cli-plugin-babel": "^5.0.0-rc.1", 39 | "@vue/cli-plugin-eslint": "^5.0.0-rc.1", 40 | "@vue/cli-plugin-unit-jest": "^5.0.0-rc.1", 41 | "@vue/cli-service": "^5.0.0-rc.1", 42 | "@vue/compiler-sfc": "^3.2.26", 43 | "@vue/test-utils": "^2.0.0-beta.5", 44 | "@vue/vue3-jest": "^27.0.0-alpha.4", 45 | "core-js": "^3.20.2", 46 | "eslint": "^8.6.0", 47 | "eslint-config-prettier": "^8.3.0", 48 | "eslint-plugin-prettier": "^4.0.0", 49 | "eslint-plugin-vue": "^8.3.0", 50 | "husky": "^7.0.4", 51 | "markdown-it-strikethrough-alt": "^1.0.0", 52 | "prettier": "^2.5.1", 53 | "typescript": "^4.5.4", 54 | "vue": "^3.2.26", 55 | "vue-jest": "^5.0.0-alpha.4" 56 | }, 57 | "homepage": "https://janguillermo.github.io/vue3-markdown-it/", 58 | "repository": { 59 | "type": "git", 60 | "url": "https://github.com/JanGuillermo/vue3-markdown-it.git" 61 | }, 62 | "bugs": { 63 | "url": "https://github.com/JanGuillermo/vue3-markdown-it/issues" 64 | }, 65 | "husky": { 66 | "hooks": { 67 | "pre-commit": "npm run lint", 68 | "pre-push": "npm run test && npm run build" 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,visualstudiocode 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | 83 | # Next.js build output 84 | .next 85 | 86 | # Nuxt.js build / generate output 87 | .nuxt 88 | dist 89 | 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and not Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | 99 | # Serverless directories 100 | .serverless/ 101 | 102 | # FuseBox cache 103 | .fusebox/ 104 | 105 | # DynamoDB Local files 106 | .dynamodb/ 107 | 108 | # TernJS port file 109 | .tern-port 110 | 111 | # Stores VSCode versions used for testing VSCode extensions 112 | .vscode-test 113 | 114 | ### VisualStudioCode ### 115 | .vscode/* 116 | !.vscode/settings.json 117 | !.vscode/tasks.json 118 | !.vscode/launch.json 119 | !.vscode/extensions.json 120 | *.code-workspace 121 | 122 | ### VisualStudioCode Patch ### 123 | # Ignore all local history of files 124 | .history 125 | 126 | # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 127 | -------------------------------------------------------------------------------- /src/vue-markdown-it.js: -------------------------------------------------------------------------------- 1 | import { h, onMounted, onUpdated, ref } from 'vue'; 2 | 3 | import MarkdownIt from 'markdown-it'; 4 | import MarkdownItAbbr from 'markdown-it-abbr'; 5 | import MarkdownItAnchor from 'markdown-it-anchor'; 6 | import MarkdownItDeflist from 'markdown-it-deflist'; 7 | import MarkdownItEmoji from 'markdown-it-emoji'; 8 | import MarkdownItFootnote from 'markdown-it-footnote'; 9 | import MarkdownItHighlightjs from 'markdown-it-highlightjs'; 10 | import MarkdownItIns from 'markdown-it-ins'; 11 | import MarkdownItMark from 'markdown-it-mark'; 12 | import MarkdownItSub from 'markdown-it-sub'; 13 | import MarkdownItSup from 'markdown-it-sup'; 14 | import MarkdownItTasklists from 'markdown-it-task-lists'; 15 | import MarkdownItTOC from 'markdown-it-toc-done-right'; 16 | 17 | const props = { 18 | anchor: { 19 | type: Object, 20 | default: () => ({}) 21 | }, 22 | breaks: { 23 | type: Boolean, 24 | default: false 25 | }, 26 | emoji: { 27 | type: Object, 28 | default: () => ({}) 29 | }, 30 | highlight: { 31 | type: Object, 32 | default: () => ({}) 33 | }, 34 | html: { 35 | type: Boolean, 36 | default: false 37 | }, 38 | langPrefix: { 39 | type: String, 40 | default: 'language-' 41 | }, 42 | linkify: { 43 | type: Boolean, 44 | default: false 45 | }, 46 | plugins: { 47 | type: Array, 48 | default: () => [] 49 | }, 50 | quotes: { 51 | type: String, 52 | default: '“”‘’' 53 | }, 54 | source: { 55 | type: String, 56 | default: '' 57 | }, 58 | tasklists: { 59 | type: Object, 60 | default: () => ({}) 61 | }, 62 | toc: { 63 | type: Object, 64 | default: () => ({}) 65 | }, 66 | typographer: { 67 | type: Boolean, 68 | default: false 69 | }, 70 | xhtmlOut: { 71 | type: Boolean, 72 | default: false 73 | } 74 | }; 75 | 76 | export default { 77 | name: 'vue3-markdown-it', 78 | props, 79 | setup(props) { 80 | const md = ref(); 81 | const renderMarkdown = () => { 82 | let markdown = new MarkdownIt() 83 | .use(MarkdownItAbbr) 84 | .use(MarkdownItAnchor, props.anchor) 85 | .use(MarkdownItDeflist) 86 | .use(MarkdownItEmoji, props.emoji) 87 | .use(MarkdownItFootnote) 88 | .use(MarkdownItHighlightjs, props.highlight) 89 | .use(MarkdownItIns) 90 | .use(MarkdownItMark) 91 | .use(MarkdownItSub) 92 | .use(MarkdownItSup) 93 | .use(MarkdownItTasklists, props.tasklists) 94 | .use(MarkdownItTOC, props.toc) 95 | .set({ 96 | breaks: props.breaks, 97 | html: props.html, 98 | langPrefix: props.langPrefix, 99 | linkify: props.linkify, 100 | quotes: props.quotes, 101 | typographer: props.typographer, 102 | xhtmlOut: props.xhtmlOut 103 | }); 104 | 105 | props.plugins.forEach(({ plugin, options = {} }) => { 106 | markdown.use(plugin, options); 107 | }); 108 | 109 | md.value = markdown.render(props.source); 110 | }; 111 | 112 | onMounted(() => renderMarkdown()); 113 | onUpdated(() => renderMarkdown()); 114 | 115 | return () => h('div', { innerHTML: md.value }); 116 | } 117 | }; 118 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [1.0.10] - 2022-01-14 8 | ### Changed 9 | - Update dependencies 10 | 11 | ## [1.0.9] - 2021-06-05 12 | ### Changed 13 | - Update dependencies 14 | - Fix README (Thanks [manonthemat](https://github.com/manonthemat) for [#186](https://github.com/JanGuillermo/vue3-markdown-it/pull/186)!) 15 | 16 | ## [1.0.8] - 2021-04-02 17 | ### Changed 18 | - Update dependencies 19 | 20 | ## [1.0.7] - 2020-12-11 21 | ### Changed 22 | - Update dependencies 23 | 24 | ## [1.0.6] - 2020-12-10 25 | ### Changed 26 | - Update dependencies 27 | 28 | ## [1.0.5] - 2020-09-19 29 | ### Changed 30 | - Update dependencies 31 | 32 | ## [1.0.4] - 2020-09-17 33 | ### Added 34 | - Added support for external plugins using a new property `plugins` 35 | 36 | ### Removed 37 | - [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex) dependency 38 | 39 | ## [1.0.3] - 2020-09-16 40 | ### Added 41 | - Added `linkify` property 42 | 43 | ### Changed 44 | - Reduced production library size 45 | 46 | ### Removed 47 | - [markdown-it-strikethrough-alt](https://github.com/jay-hodgson/markdown-it-strikethrough-alt) dependency 48 | 49 | ## [1.0.2] - 2020-09-15 50 | ### Added 51 | - Added information on README for including LaTeX + highlight.js styles 52 | 53 | ### Changed 54 | - Split test cases into individual plugin test files 55 | - Utilize Vue's Compositions API for the component 56 | 57 | ### Fixed 58 | - [Syntax highlighting indentation issues #14](https://github.com/JanGuillermo/vue3-markdown-it/issues/14) 59 | 60 | ### Removed 61 | - Omitted the production library folder 62 | - Omitted the includes for LaTeX + highlight.js styles 63 | - [dedent](https://github.com/MartinKolarik/dedent-js) dependency 64 | - [highlight.js](https://github.com/highlightjs/highlight.js) dependency 65 | 66 | ## [1.0.1] - 2020-09-14 67 | ### Added 68 | - Released vue3-markdown-it with support for 14 plugins: 69 | - [markdown-it](https://github.com/markdown-it/markdown-it) - __The one__ that started it all 70 | - [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) - Add abbreviations 71 | - [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) - Add anchors 72 | - [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) - Add definition lists 73 | - [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) - Add emojis 74 | - [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) - Add footnotes 75 | - [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) - Add highlighting for code blocks 76 | - [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) - Add `` tags 77 | - [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex) - Add LaTeX formatting 78 | - [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) - Add marking/highlighting 79 | - [markdown-it-strikethrough-alt](https://github.com/jay-hodgson/markdown-it-strikethrough-alt) - Add strikethrough 80 | - [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) - Add subscript 81 | - [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) - Add superscript 82 | - [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - Add task lists 83 | - [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) - Add table of contents 84 | 85 | [1.0.10]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.9...v1.0.10 86 | [1.0.9]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.8...v1.0.9 87 | [1.0.8]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.7...v1.0.8 88 | [1.0.7]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.6...v1.0.7 89 | [1.0.6]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.5...v1.0.6 90 | [1.0.5]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.4...v1.0.5 91 | [1.0.4]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.3...v1.0.4 92 | [1.0.3]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.2...v1.0.3 93 | [1.0.2]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.1...v1.0.2 94 | [1.0.1]: https://github.com/JanGuillermo/vue3-markdown-it/releases/tag/v1.0.1 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Currently not being maintained. 2 | 3 | Please go to [vite-plugin-vue-markdown](https://github.com/mdit-vue/vite-plugin-vue-markdown) or find another alternative. 4 | 5 | --- 6 | 7 |

8 | logo 9 |

10 | 11 | # ✨ vue3-markdown-it ✨ 12 | 13 | [![GitHub package.json version](https://img.shields.io/github/package-json/v/JanGuillermo/vue3-markdown-it)](https://www.npmjs.com/package/vue3-markdown-it) [![Build Status](https://travis-ci.com/JanGuillermo/vue3-markdown-it.svg?branch=master)](https://travis-ci.com/JanGuillermo/vue3-markdown-it) [![codecov](https://codecov.io/gh/JanGuillermo/vue3-markdown-it/branch/master/graph/badge.svg)](https://codecov.io/gh/JanGuillermo/vue3-markdown-it) [![Dependencies Status](https://david-dm.org/JanGuillermo/vue3-markdown-it.svg)](https://david-dm.org/JanGuillermo/vue3-markdown-it) [![Known Vulnerabilities](https://snyk.io/test/github/JanGuillermo/vue3-markdown-it/badge.svg?targetFile=package.json)](https://snyk.io/test/github/JanGuillermo/vue3-markdown-it?targetFile=package.json) [![npm](https://img.shields.io/npm/dt/vue3-markdown-it)](https://www.npmjs.com/package/vue3-markdown-it) 14 | 15 | > An awesome Vue 3 [markdown-it](https://github.com/markdown-it/markdown-it) wrapper plugin that can even support external plugins! 16 | 17 | 🔎 [Live Demo](https://janguillermo.github.io/vue3-markdown-it/) 18 | 19 | --- 20 | 21 | ## Installation 22 | ``` 23 | npm install vue3-markdown-it 24 | ``` 25 | 26 | ## Supported Plugins 27 | - [markdown-it](https://github.com/markdown-it/markdown-it) - __The one__ that started it all 28 | - [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) - Add abbreviations 29 | - [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) - Add anchors 30 | - [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) - Add definition lists 31 | - [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) - Add emojis 32 | - [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) - Add footnotes 33 | - [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) - Add highlighting for code blocks 34 | - [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) - Add `` tags 35 | - [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) - Add marking/highlighting 36 | - [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) - Add subscript 37 | - [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) - Add superscript 38 | - [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - Add task lists 39 | - [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) - Add table of contents 40 | 41 | ## Usage 42 | ### Global Use 43 | ```js 44 | import { createApp } from 'vue'; 45 | import Markdown from 'vue3-markdown-it'; 46 | 47 | const app = createApp(); 48 | 49 | app.use(Markdown); 50 | ``` 51 | 52 | ### CSS 53 | If you want to use highlighting for code blocks, you'll have to import a CSS file from [highlight.js](https://github.com/highlightjs/highlight.js). View more styles [here](https://github.com/highlightjs/highlight.js/tree/master/src/styles). The code sample below imports the Monokai styling. 54 | ```js 55 | import 'highlight.js/styles/monokai.css'; 56 | ``` 57 | 58 | ### Single Use 59 | ```vue 60 | 65 | 66 | 80 | ``` 81 | 82 | ## Props 83 | The following properties are supported: 84 | 85 | ### `anchor` 86 | > View [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) for more information. 87 | 88 | Type: `Object` | Default value: `null` 89 | 90 | ### `breaks` 91 | > Convert `\n` in paragraphs into `
`. 92 | 93 | Type: `Boolean` | Default value: `false` 94 | 95 | ### `emoji` 96 | > View [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) for more information. 97 | 98 | Type: `Object` | Default value: `null` 99 | 100 | ### `highlight` 101 | > View [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) for more information. 102 | 103 | Type: `Object` | Default value: `null` 104 | 105 | ### `html` 106 | > Enable HTML tags in source. 107 | 108 | Type: `Boolean` | Default value: `false` 109 | 110 | ### `langPrefix` 111 | > CSS language prefix for fenced blocks. Can be useful for external highlighters. 112 | 113 | Type: `String` | Default value: `language-` 114 | 115 | ### `linkify` 116 | > Autoconvert URL-like text to links 117 | 118 | Type: `Boolean` | Default value: `false` 119 | 120 | ### `plugins` 🌟 121 | > Don't see your favorite markdown-it plugin in the list of supported plugins? You can create an array of plugins and bind it into the component! 122 | > > The array only consists of objects (plugins in that case). A plugin has two properties: 123 | > > - `plugin`: A `markdown-it` plugin imported into this 124 | > > - `options`: Set the options for a specific `markdown-it` plugin. 125 | > ```vue 126 | > 131 | > 132 | > 152 | > ``` 153 | 154 | Type: `Array` | Default value: `[]` 155 | 156 | ### `quotes` 157 | > Double + single quotes replacement pairs, when typographer enabled and smartquotes on. Could be either a String or an Array. *For example*, you can use `«»„“` for Russian, `„“‚‘` for German, and `['«\xA0', '\xA0»', '‹\xA0', '\xA0›']` for French (including nbsp). 158 | 159 | Type: `String | String[]` | Default value: `“”‘’` 160 | 161 | ### `source` 162 | > Content to be rendered into markdown. 163 | 164 | Type: `String` | Default value: `null` 165 | 166 | ### `tasklists` 167 | > View [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) for more information. 168 | 169 | Type: `Object` | Default value: `null` 170 | 171 | ### `toc` 172 | > View [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) for more information. 173 | 174 | Type: `Object` | Default value: `null` 175 | 176 | ### `typographer` 177 | > Enable some language-neutral replacement + quotes beautification. 178 | 179 | Type: `Boolean` | Default value: `false` 180 | 181 | ### `xhtmlOut` 182 | > Use `/` to close single tags (`
`). 183 | 184 | Type: `Boolean` | Default value: `false` 185 | 186 | ## License 187 | [MIT](https://github.com/JanGuillermo/vue3-markdown-it/blob/master/LICENSE) 188 | --------------------------------------------------------------------------------