Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: miaolz123/vue-markdown
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: adapttive/vue-markdown
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: next
Choose a head ref
Able to merge. These branches can be automatically merged.
8 contributors
Loading
Showing with 472 additions and 23,088 deletions.
  1. +3 −3 .babelrc
  2. +18 −21 .eslintrc.js
  3. +12 −0 .github/FUNDING.yml
  4. +71 −0 .github/workflows/codeql-analysis.yml
  5. +16 −0 .github/workflows/publish.yml
  6. +7 −0 .gitignore
  7. +117 −41 README.md
  8. +2 −462 dist/vue-markdown.common.js
  9. +8 −0 dist/vue-markdown.common.js.LICENSE.txt
  10. +2 −22,448 dist/vue-markdown.js
  11. +8 −0 dist/vue-markdown.js.LICENSE.txt
  12. +5 −5 example/simple/index.html
  13. +34 −0 index.d.ts
  14. +38 −28 package.json
  15. +22 −0 renovate.json
  16. +79 −48 src/VueMarkdown.js
  17. +6 −2 src/build.js
  18. +9 −12 webpack.common.js
  19. +15 −18 webpack.config.js
6 changes: 3 additions & 3 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
39 changes: 18 additions & 21 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
module.exports = {
root: true,
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
env: {
'browser': true,
},
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'comma-dangle': 0,
'no-unused-vars': 1,
'space-before-function-paren': 0,
}
}
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:vue/essential",
"standard"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
};
12 changes: 12 additions & 0 deletions .github/FUNDING.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# These are supported funding model platforms

github: [milindsingh]
patreon: adapttive
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
71 changes: 71 additions & 0 deletions .github/workflows/codeql-analysis.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"

on:
push:
branches: [ next ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ next ]
schedule:
- cron: '21 19 * * 1'

jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write

strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
# Learn more:
# https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed

steps:
- name: Checkout repository
uses: actions/checkout@v2

# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main

# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v1

# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl

# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language

#- run: |
# make bootstrap
# make release

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
16 changes: 16 additions & 0 deletions .github/workflows/publish.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
on: push

jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm install
- run: npm test
- run: npm run build
- uses: JS-DevTools/npm-publish@v1
with:
token: ${{ secrets.NPM_TOKEN }}
7 changes: 7 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -32,3 +32,10 @@ node_modules
# Optional REPL history
.node_repl_history
package-lock.json

<<<<<<< HEAD
# Ignore IDE files
=======
# removing idea
>>>>>>> 068da8e... readme updated
.idea
158 changes: 117 additions & 41 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# vue-markdown

[![npm](https://img.shields.io/npm/v/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)
[![npm](https://img.shields.io/npm/l/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)
[![npm](https://img.shields.io/npm/dt/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)
[![npm](https://img.shields.io/npm/v/@adapttive/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown@adapttive/)
[![npm](https://img.shields.io/npm/l/@adapttive/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown@adapttive/)
[![npm](https://img.shields.io/david/adapttive/vue-markdown)](https://www.npmjs.com/package/@adapttive/vue-markdown)
[![npm](https://img.shields.io/bundlephobia/min/@adapttive/vue-markdown)](https://www.npmjs.com/package/@adapttive/vue-markdown)
[![npm](https://img.shields.io/npm/dt/@adapttive/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/@adapttive/vue-markdown)

> If you want vue-markdown for `vue1.X.X`, please checkout [vue-markdown1.X.X](https://github.com/miaolz123/vue-markdown/tree/v1).
> If you want vue-markdown for `vue1.X.X`, please checkout [vue-markdown1.X.X](https://github.com/adapttive/vue-markdown/tree/v1).
A Powerful and Highspeed Markdown Parser for Vue.

@@ -23,21 +25,21 @@ Supported Markdown Syntax:
* [x] subscript
* [x] footnote
* [x] insert
* [x] *katex
* [x] emoji
* [x] mark
* [x] *katex

`*SyntaxHighlighter` work with [Prism](https://prismjs.com) recommend

`*katex` need add [katex css](https://unpkg.com/katex/dist/katex.min.css).

# Example

[simple](https://github.com/miaolz123/vue-markdown/blob/master/example/simple)
[simple](https://github.com/adapttive/vue-markdown/blob/master/example/simple)

[webpack-simple](https://github.com/miaolz123/vue-markdown/blob/master/example/webpack-simple)
[webpack-simple](https://github.com/adapttive/vue-markdown/blob/master/example/webpack-simple)

[Live Demo](https://miaolz123.github.io/vue-markdown/)
[Live Demo](https://adapttive.github.io/vue-markdown/)

# Installation

@@ -62,19 +64,32 @@ Supported Markdown Syntax:
### NPM

```shell
$ npm install --save vue-markdown
$ npm install --save @adapttive/vue-markdown
```

### Yarn

```shell
$ yarn add vue-markdown --save
$ yarn add @adapttive/vue-markdown --save
```

### Migrating from vue-markdown 2.3

- You just need to replace the dependencies in `package.json`:

```
{
"dependencies": {
- "vue-markdown": "^2.2.4
+ "vue-markdown": "npm:@adapttive/vue-markdown@^X.X.X"
}
}
```

## CommonJS

```js
var VueMarkdown = require('vue-markdown');
var VueMarkdown = require('@adapttive/vue-markdown');

new Vue({
components: {
@@ -88,7 +103,7 @@ new Vue({
After installing via Yarn or NPM, use the following snippet in the script portion of the Vue component which you wish to render the Markdown.

```js
import VueMarkdown from 'vue-markdown'
import VueMarkdown from '@adapttive/vue-markdown'

new Vue({
components: {
@@ -111,34 +126,37 @@ TIP: The default slot only renders **once** at the beginning, and it will overwr

# Props

| Prop | Type | Default | Describe |
| ---- | ---- | ------- | ------- |
| watches | Array | `["source", "show", "toc"]` | HTML refresh automatically when the prop in this array changed |
| source | String | `null` | the markdown source code |
| show | Boolean | `true` | enable render to the default slot automatically |
| html | Boolean | `true` | enable HTML syntax in source |
| xhtml-out | Boolean | `true` | `<br></br>` => `<br />` |
| breaks | Boolean | `true` | `\n` => `<br>` |
| linkify | Boolean | `true` | autoconvert URL-like text to link |
| emoji | Boolean | `true` | `:)` => `😃` |
| typographer | Boolean | `true` | enable some language-neutral replacement and quotes beautification |
| lang-prefix | String | `language-` | CSS language prefix for fenced blocks |
| quotes | String | `“”‘’` | use `“”‘’` for Chinese, `„“‚‘` for German, `«»„“` for Russian |
| table-class | String | `table` | customize html class of the `<table>` |
| task-lists | Boolean | `true` | enable GFM task list |
| toc | Boolean | `false` | enable automatic table of contents |
| toc-id | String | `undefined` | the HTML id to render TOC |
| toc-class | String | `table` | customize html class of the `<ul>` wrapping the TOC |
| toc-first-level | Number | `2` | use `2` if you want to skip `<h1>` from the TOC |
| toc-last-level | Number | `'toc-first-level' + 1` | use `5` if you want to skip `<h6>` from the TOC |
| toc-anchor-link | Boolean | `true` | enable the automatic anchor link in the headings |
| toc-anchor-class | String | `toc-anchor` | customize the anchor class name |
| toc-anchor-link-symbol | String | `#` | customize the anchor link symbol |
| toc-anchor-link-space | Boolean | `true` | enable inserting a space between the anchor link and heading |
| toc-anchor-link-class | String | `toc-anchor-link` | customize the anchor link symbol class name |
| anchorAttributes | Object | `{}` | anchor tag attributes such as `target: '_blank'` or `rel: 'nofollow'` |
| prerender | Function (String) String | `null` | filter function before markdown parse |
| postrender | Function (String) String | `null` | filter function after markdown parse |
| Prop | Type | Default | Describe |
| ---------------------- | ------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| watches | Array | `["source", "show", "toc"]` | HTML refresh automatically when the prop in this array changed |
| source | String | `null` | the markdown source code |
| show | Boolean | `true` | enable render to the default slot automatically |
| html | Boolean | `true` | enable HTML syntax in source |
| xhtml-out | Boolean | `true` | `<br></br>` => `<br />` |
| breaks | Boolean | `true` | `\n` => `<br>` |
| linkify | Boolean | `true` | autoconvert URL-like text to link |
| emoji | Boolean | `true` | `:)` => `😃` |
| typographer | Boolean | `true` | enable some language-neutral replacement and quotes beautification |
| update-prism | Boolean | `true` | if true, vue-markdown will automatically call a re-render of all code blocks through Prism.js ([Using Prism.js](#using-prism.js)) |
| lang-prefix | String | `language-` | CSS language prefix for fenced blocks |
| quotes | String | `“”‘’` | use `“”‘’` for Chinese, `„“‚‘` for German, `«»„“` for Russian |
| table-class | String | `table` | customize html class of the `<table>` |
| task-lists | Boolean | `true` | Makes GFM task lists mutable, `false` shows GFM as readonly checkboxes |
| toc | Boolean | `false` | enable automatic table of contents |
| toc-id | String | `undefined` | the HTML id to render TOC |
| toc-class | String | `table` | customize html class of the `<ul>` wrapping the TOC |
| toc-first-level | Number | `2` | use `2` if you want to skip `<h1>` from the TOC |
| toc-last-level | Number | `'toc-first-level' + 1` | use `5` if you want to skip `<h6>` from the TOC |
| toc-anchor-link | Boolean | `true` | enable the automatic anchor link in the headings |
| toc-anchor-class | String | `toc-anchor` | customize the anchor class name |
| toc-anchor-link-symbol | String | `#` | customize the anchor link symbol |
| toc-anchor-link-space | Boolean | `true` | enable inserting a space between the anchor link and heading |
| toc-anchor-link-class | String | `toc-anchor-link` | customize the anchor link symbol class name |
| toc-anchor-link-before | Boolean | `true` | allows you to prepend/append the anchor link in the headings |
| anchorAttributes | Object | `{}` | anchor tag attributes such as `target: '_blank'` or `rel: 'nofollow'` |
| prerender | Function (String) String | `null` | filter function before markdown parse |
| postrender | Function (String) String | `null` | filter function after markdown parse |
| inline | Boolean | `false` | result will NOT be wrapped into `<p>` tags |

# Events

@@ -147,6 +165,59 @@ TIP: The default slot only renders **once** at the beginning, and it will overwr
| rendered | outHtml[String] | dispatch when render finish |
| toc-rendered | tocHtml[String] | dispatch when TOC render finish, never dispatch if the toc[prop] is `false` |

# Using Prism.js

1. Visit the [download page](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript)
2. Select all the options that apply for your project
3. At the bottom of the page download both the JS and CSS
4. Include them in your `index.html` **MAKE SURE to include Prism before your** `app.js`


# Plugins

```html
<template>
<div>
<vue3-markdown-it :source='source' :plugins='plugins' />
</div>
</template>

<script>
import katex from 'markdown-it-katex';
import tasklists from 'markdown-it-task-lists';
import externalPreview from 'markdown-it-external-preview';
import VueMarkdown from 'vue-markdown';
export default {
components: {
VueMarkdown
},
data() {
return {
plugins: [
{
plugin: katex,
options: { throwOnError: false, errorColor: ' #cc0000' }
},
{
plugin: tasklists,
options: { enabled: this.taskLists }
},
{
plugin: externalPreview
}
]
}
}
}
</script>
```

- Make sure you add dependencies for plugins:
- `"highlight.js": "^10.4.0"`
- `"markdown-it-external-preview": "^1.0.4"`
- `"markdown-it-katex": "npm:@iktakahiro/markdown-it-katex@^4.0.1"`

# Thanks

- [markdown-it](https://github.com/markdown-it/markdown-it)
@@ -165,7 +236,12 @@ TIP: The default slot only renders **once** at the beginning, and it will overwr
- [killix](https://github.com/killix)
- [LeFnord](https://github.com/lefnord)
- [FlorianWendelborn](https://github.com/FlorianWendelborn)
- [NoahCardoza](https://github.com/NoahCardoza)
- [milindsingh](https://github.com/milindsingh)

# License

Copyright (c) 2016 [miaolz123](https://github.com/miaolz123) by [MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2016

- [miaolz123](https://github.com/miaolz123) by [MIT](https://opensource.org/licenses/MIT)
- [milindsingh](https://github.com/milindsingh) by [MIT](https://opensource.org/licenses/MIT)
Loading