$/, '')
12 | }
13 | return html
14 | }
15 | })
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/plugins/i18n/LanguageSelector.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
16 |
17 |
18 |
19 |
20 |
43 |
44 |
50 |
--------------------------------------------------------------------------------
/src/plugins/i18n/index.js:
--------------------------------------------------------------------------------
1 | import LanguageSelector from './LanguageSelector.vue'
2 |
3 | export default {
4 | name: 'i18n',
5 | extend: api => {
6 | if (api.store.getters.languageOverrides) {
7 | api.registerComponent('sidebar:start', LanguageSelector)
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/plugins/search/SearchBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
39 |
40 |
41 |
93 |
94 |
208 |
--------------------------------------------------------------------------------
/src/plugins/search/index.js:
--------------------------------------------------------------------------------
1 | import SearchBar from './SearchBar.vue'
2 |
3 | export default {
4 | name: 'search',
5 | extend(api) {
6 | api.registerComponent('header-right:start', SearchBar)
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/plugins/versions/VersionsSelector.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
17 |
18 |
19 |
20 |
21 |
49 |
50 |
56 |
--------------------------------------------------------------------------------
/src/plugins/versions/index.js:
--------------------------------------------------------------------------------
1 | import VersionsSelector from './VersionsSelector.vue'
2 |
3 | export default {
4 | name: 'versions',
5 | extend(api) {
6 | if (api.store.getters.config.versions) {
7 | api.registerComponent('sidebar:start', VersionsSelector)
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import RouterPrefetch from 'vue-router-prefetch'
4 | import Home from './views/Home.vue'
5 |
6 | Vue.use(Router)
7 | Vue.use(RouterPrefetch)
8 |
9 | export default routerConfig =>
10 | new Router({
11 | scrollBehavior(to, from, savedPosition) {
12 | if (savedPosition) {
13 | return savedPosition
14 | }
15 | return {x: 0, y: 0}
16 | },
17 | ...routerConfig,
18 | routes: [
19 | {
20 | path: '*',
21 | component: Home
22 | }
23 | ]
24 | })
25 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | /* globals __PRISM_VERSION__ */
2 | import Vue from 'vue'
3 | import Vuex from 'vuex'
4 | import marked from './utils/marked'
5 | import highlight from './utils/highlight'
6 | import {getFilenameByPath, getFileUrl, isExternalLink, inBrowser} from './utils'
7 | import markedRenderer from './utils/markedRenderer'
8 | import hooks from './hooks'
9 | import load from './utils/load'
10 | import prismLanguages from './utils/prismLanguages'
11 | import {defaultCssVariables, darkCssVariables} from './utils/cssVariables'
12 | import {INITIAL_STATE_NAME} from './utils/constants'
13 |
14 | Vue.use(Vuex)
15 |
16 | const initialState = inBrowser && window[INITIAL_STATE_NAME]
17 |
18 | const getDefaultTheme = (store, {theme, detectSystemDarkTheme}) => {
19 | if (!inBrowser || !detectSystemDarkTheme) {
20 | return theme || 'default'
21 | }
22 |
23 | const mq = window.matchMedia('(prefers-color-scheme: dark)')
24 |
25 | mq.addListener(() => {
26 | store.commit('SET_THEME', mq.matches ? 'dark' : 'default')
27 | })
28 |
29 | return theme || (mq.matches ? 'dark' : 'default')
30 | }
31 |
32 | const store = new Vuex.Store({
33 | state: {
34 | originalConfig: {},
35 | page: {
36 | title: null,
37 | headings: null,
38 | html: ''
39 | },
40 | env: {},
41 | showSidebar: false,
42 | fetchingFile: true,
43 | ...initialState
44 | },
45 |
46 | mutations: {
47 | SET_CONFIG(state, config = {}) {
48 | config.layout = config.layout || 'narrow'
49 | // TODO: remove `centerContent` in next major version
50 | if (config.centerContent) {
51 | config.layout = 'narrow'
52 | }
53 | config.theme = getDefaultTheme(store, config)
54 | state.originalConfig = config
55 | },
56 |
57 | SET_PAGE(state, page) {
58 | state.page = page
59 | },
60 |
61 | TOGGLE_SIDEBAR(state, show) {
62 | state.showSidebar = typeof show === 'boolean' ? show : !state.showSidebar
63 | },
64 |
65 | SET_FETCHING(state, fetching) {
66 | state.fetchingFile = fetching
67 | },
68 |
69 | SET_ENV(state, env) {
70 | state.env = env
71 | },
72 |
73 | SET_THEME(state, theme) {
74 | state.originalConfig.theme = theme
75 | }
76 | },
77 |
78 | actions: {
79 | async fetchFile({commit, getters, dispatch}, path) {
80 | commit('TOGGLE_SIDEBAR', false)
81 | commit('SET_FETCHING', true)
82 |
83 | let page = {
84 | markdown: true,
85 | ...(getters.config.routes && getters.config.routes[path])
86 | }
87 |
88 | if (!page.content && !page.file) {
89 | const filename = getFilenameByPath(path)
90 | page.file = getFileUrl(getters.config.sourcePath, filename)
91 | page.editLink =
92 | getters.config.editLinkBase &&
93 | getFileUrl(getters.config.editLinkBase, filename)
94 | }
95 |
96 | await Promise.all([
97 | !page.content &&
98 | fetch(page.file, getters.config.fetchOptions)
99 | .then(res => res.text())
100 | .then(res => {
101 | page.content = res
102 | }),
103 | dispatch('fetchPrismLanguages')
104 | ])
105 |
106 | page.content = await hooks.processPromise('processMarkdown', page.content)
107 | page = await hooks.processPromise('processPage', page)
108 |
109 | const env = {
110 | headings: [],
111 | mixins: [],
112 | config: getters.config
113 | }
114 | if (page.markdown) {
115 | page.content = marked(page.content, {
116 | renderer: markedRenderer(hooks),
117 | highlight,
118 | env
119 | })
120 | }
121 | page.content = await hooks.processPromise('processHTML', page.content)
122 | page.headings = env.headings
123 | if (!page.title) {
124 | page.title = env.title
125 | }
126 | commit('SET_PAGE', page)
127 | commit('SET_ENV', env)
128 | commit('SET_FETCHING', false)
129 | },
130 |
131 | fetchPrismLanguages({getters}) {
132 | const langs = getters.config.highlight
133 |
134 | if (!langs || langs.length === 0) {
135 | return Promise.resolve()
136 | }
137 |
138 | return load(
139 | langs
140 | .reduce((res, lang) => {
141 | if (prismLanguages[lang]) {
142 | res = res.concat(prismLanguages[lang])
143 | }
144 | res.push(lang)
145 | return res
146 | }, [])
147 | .filter((lang, i, arr) => {
148 | // Dedupe
149 | return (
150 | arr.indexOf(lang) === i &&
151 | prismLanguages.builtin.indexOf(lang) === -1
152 | )
153 | })
154 | .map(lang => {
155 | return `https://unpkg.com/prismjs@${__PRISM_VERSION__}/components/prism-${lang}.js`
156 | }),
157 | 'prism-languages'
158 | )
159 | }
160 | },
161 |
162 | getters: {
163 | target({originalConfig: {target}}) {
164 | if (!target) return 'docute'
165 | if (target[0] === '#') return target.slice(1)
166 | return target
167 | },
168 |
169 | languageOverrides({originalConfig}) {
170 | // `locales` is for legacy support
171 | const overrides = originalConfig.overrides || originalConfig.locales
172 | return (
173 | overrides &&
174 | Object.keys(overrides).reduce((res, path) => {
175 | if (overrides[path].language) {
176 | res[path] = overrides[path]
177 | }
178 | return res
179 | }, {})
180 | )
181 | },
182 |
183 | currentLocalePath({route}, {languageOverrides}) {
184 | if (languageOverrides) {
185 | // Is it a locale?
186 | for (const localePath of Object.keys(languageOverrides)) {
187 | if (localePath !== '/') {
188 | const RE = new RegExp(`^${localePath}`)
189 | if (RE.test(route.path)) {
190 | return localePath
191 | }
192 | }
193 | }
194 | }
195 |
196 | return '/'
197 | },
198 |
199 | config({originalConfig}, {currentLocalePath, languageOverrides}) {
200 | return languageOverrides
201 | ? {
202 | ...originalConfig,
203 | ...languageOverrides[currentLocalePath]
204 | }
205 | : originalConfig
206 | },
207 |
208 | homePaths(_, {languageOverrides}) {
209 | const localePaths = languageOverrides
210 | ? Object.keys(languageOverrides)
211 | : []
212 | return [...localePaths, '/']
213 | },
214 |
215 | sidebarLinks(_, {sidebar}) {
216 | return sidebar
217 | ? sidebar
218 | .reduce((res, next) => {
219 | // backward compabillity
220 | const children = next.children || next.links || []
221 | return [...res, ...children]
222 | }, [])
223 | .filter(item => {
224 | return !isExternalLink(item.link)
225 | })
226 | : []
227 | },
228 |
229 | sidebar(_, {config}) {
230 | const sidebar = config.sidebar || []
231 | return typeof sidebar === 'function' ? sidebar(store) : sidebar
232 | },
233 |
234 | cssVariables(_, {config}) {
235 | return {
236 | ...(config.theme === 'dark' ? darkCssVariables : defaultCssVariables),
237 | ...(typeof config.cssVariables === 'function'
238 | ? config.cssVariables(config.theme)
239 | : config.cssVariables)
240 | }
241 | }
242 | }
243 | })
244 |
245 | if (process.env.NODE_ENV === 'development' && inBrowser) {
246 | window.store = store
247 | }
248 |
249 | export default store
250 |
--------------------------------------------------------------------------------
/src/utils/__test__/index.test.js:
--------------------------------------------------------------------------------
1 | import assert from 'assert'
2 | import {getFilenameByPath, getFileUrl} from '..'
3 |
4 | describe('utils/index', () => {
5 | it('getFilenameByPath', () => {
6 | assert(getFilenameByPath('/') === '/README.md')
7 | assert(getFilenameByPath('/foo') === '/foo.md')
8 | assert(getFilenameByPath('foo') === '/foo.md')
9 | assert(getFilenameByPath('/foo/bar/') === '/foo/bar/README.md')
10 | })
11 |
12 | it('getFileUrl', () => {
13 | assert(getFileUrl(null, getFilenameByPath('/')) === 'README.md')
14 | assert(getFileUrl('/', getFilenameByPath('/')) === '/README.md')
15 | assert(getFileUrl('./', getFilenameByPath('/')) === 'README.md')
16 | assert(getFileUrl('./docs/', getFilenameByPath('/')) === 'docs/README.md')
17 | assert(getFileUrl('/docs/', getFilenameByPath('/')) === '/docs/README.md')
18 | assert(getFileUrl('/docs/', getFilenameByPath('/foo')) === '/docs/foo.md')
19 | assert(
20 | getFileUrl('/docs/', getFilenameByPath('/foo.md')) === '/docs/foo.md'
21 | )
22 | assert(
23 | getFileUrl('/docs/', getFilenameByPath('/foo/')) === '/docs/foo/README.md'
24 | )
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/src/utils/alternativeComponents.js:
--------------------------------------------------------------------------------
1 | const getComponent = tag => {
2 | return {
3 | functional: true,
4 | render(h, ctx) {
5 | return h(tag, ctx.data, ctx.children)
6 | }
7 | }
8 | }
9 |
10 | export default Vue => {
11 | Vue.component('v-style', getComponent('style'))
12 | Vue.component('v-script', getComponent('script'))
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const INITIAL_STATE_NAME = '__DOCUTE_INITIAL_STATE__'
2 |
--------------------------------------------------------------------------------
/src/utils/cssVariables.js:
--------------------------------------------------------------------------------
1 | const defaultCssVariables = {
2 | accentColor: '#009688',
3 | pageBackground: '#fff',
4 | headerBackground: '#fff',
5 | headerTextColor: 'var(--text-color)',
6 | textColor: '#000',
7 | linkColor: 'var(--accent-color)',
8 | sidebarWidth: '280px',
9 | sidebarBackground: 'var(--page-background)',
10 | sidebarLinkColor: '#444',
11 | sidebarLinkActiveColor: '#000',
12 | sidebarLinkArrowColor: '#999',
13 | mainBackground: 'var(--page-background)',
14 | borderColor: '#eaeaea',
15 | headerHeight: '55px',
16 | codeFont: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
17 | tipColor: 'rgb(6, 125, 247)',
18 | successColor: '#42b983',
19 | warningColor: '#ff9800',
20 | dangerColor: 'rgb(255, 0, 31)',
21 | navLinkColor: '#2c3e50',
22 | navLinkBorderColor: 'var(--accent-color)',
23 | codeBlockBackground: '#011627',
24 | codeBlockTextColor: 'white',
25 | codeBlockShadowColor: '#333',
26 | codeBlockShadowWidth: '0px',
27 | highlightedLineBackground: '#022a4b',
28 | highlightedLineBorderColor: '#ffa7c4',
29 | inlineCodeColor: 'rgb(116, 66, 16)',
30 | inlineCodeBackground: 'rgb(254, 252, 191)',
31 | loaderPrimaryColor: '#f3f3f3',
32 | loaderSecondaryColor: '#ecebeb',
33 | tableHeaderBackground: '#fafafa',
34 | tableHeaderColor: '#666',
35 | docuteSelectHeight: '38px',
36 | searchIconColor: '#999',
37 | searchFocusBorderColor: '#ccc',
38 | searchFocusIconColor: '#333',
39 | searchResultHoverBackground: '#f9f9f9'
40 | }
41 |
42 | const darkCssVariables = {
43 | ...defaultCssVariables,
44 | headerBackground: 'var(--page-background)',
45 | sidebarLinkColor: 'var(--text-color)',
46 | sidebarLinkActiveColor: 'var(--text-color)',
47 | textColor: 'hsla(0,0%,100%,0.88)',
48 | pageBackground: '#2f3136',
49 | navLinkColor: 'var(--text-color)',
50 | borderColor: '#3e4147',
51 | highlightedLineBackground: '#022a4b',
52 | highlightedLineBorderColor: '#ffa7c4',
53 | inlineCodeColor: '#e6e6e6',
54 | inlineCodeBackground: '#373c49',
55 | loaderPrimaryColor: 'hsla(0, 0%, 100%, 0.08)',
56 | loaderSecondaryColor: 'hsla(0, 0%, 100%, 0.18)',
57 | contentLinkBorder: '2px solid hsla(0, 0%, 100%, 0.28)',
58 | contentLinkHoverBorderColor: 'currentColor',
59 | tableHeaderBackground: 'var(--border-color)',
60 | tableHeaderColor: '#868686',
61 | searchIconColor: '#999',
62 | searchFocusBorderColor: '#999',
63 | searchFocusIconColor: '#ccc',
64 | searchResultBackground: '#27292f',
65 | searchResultHoverBackground: '#1e2025'
66 | }
67 |
68 | export {defaultCssVariables, darkCssVariables}
69 |
--------------------------------------------------------------------------------
/src/utils/highlight.js:
--------------------------------------------------------------------------------
1 | import Prism from 'prismjs'
2 |
3 | export default function highlight(str, lang) {
4 | if (!lang) return str
5 |
6 | let resolvedLang = lang && Prism.languages[lang]
7 | if (!resolvedLang) {
8 | lang = 'markup'
9 | resolvedLang = Prism.languages.markup
10 | }
11 |
12 | return Prism.highlight(str, resolvedLang, lang)
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const isExternalLink = link => {
2 | return /^https?:\/\//.test(link)
3 | }
4 |
5 | export const slugify = str => {
6 | const RE = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g
7 | const REPLACEMENT = '-'
8 | const WHITESPACE = /\s/g
9 |
10 | return str
11 | .trim()
12 | .replace(RE, '')
13 | .replace(WHITESPACE, REPLACEMENT)
14 | .toLowerCase()
15 | }
16 |
17 | export const getFileUrl = (sourcePath, path) => {
18 | sourcePath = sourcePath || '.'
19 |
20 | // Remove trailing slash in `sourcePath`
21 | // Since `path` always starts with slash
22 | sourcePath = sourcePath.replace(/\/$/, '')
23 |
24 | const result = sourcePath + path
25 |
26 | return result.replace(/^\.\//, '')
27 | }
28 |
29 | export const getFilenameByPath = path => {
30 | // Ensure path always starts with slash
31 | path = path.replace(/^\/?/, '/')
32 |
33 | // Add .md suffix
34 | if (!/\.md$/.test(path)) {
35 | path = /\/$/.test(path) ? `${path}README.md` : `${path}.md`
36 | }
37 |
38 | return path
39 | }
40 |
41 | export const inBrowser = typeof window !== 'undefined'
42 |
--------------------------------------------------------------------------------
/src/utils/load.js:
--------------------------------------------------------------------------------
1 | import loadjs from 'loadjs'
2 |
3 | export default (deps, id) =>
4 | new Promise(resolve => {
5 | if (loadjs.isDefined(id)) return resolve()
6 | loadjs(deps, id, {
7 | success: resolve,
8 | error(err) {
9 | console.error('Deps not found:', err)
10 | resolve()
11 | }
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/src/utils/markedRenderer.js:
--------------------------------------------------------------------------------
1 | import marked from './marked'
2 | import {slugify} from '.'
3 |
4 | export default hooks => {
5 | const renderer = new marked.Renderer()
6 |
7 | const slugs = []
8 | renderer.heading = function(text, level, raw) {
9 | const {env} = this.options
10 |
11 | let slug = slugify(raw)
12 | slugs.push(slug)
13 | const sameSlugCount = slugs.filter(v => v === slug).length
14 | if (sameSlugCount > 1) {
15 | slug += `-${sameSlugCount}`
16 | }
17 |
18 | if (level === 1) {
19 | env.title = text
20 | // Remove h1 header
21 | return ''
22 | }
23 |
24 | if (level === 2) {
25 | env.headings.push({
26 | level,
27 | raw,
28 | // Remove trailing HTML
29 | text: raw.replace(/<.*>\s*$/g, ''),
30 | slug
31 | })
32 | }
33 |
34 | const tag = `h${level}`
35 | return `<${tag} class="markdown-header" id="${slug}">
36 |
39 | ${text}`
40 | }
41 |
42 | // Disable template interpolation in code
43 | renderer.codespan = text => `${text}`
44 | const origCode = renderer.code
45 | renderer.code = function(code, lang, escaped, opts) {
46 | opts = opts || {}
47 | const {env} = this.options
48 |
49 | if (opts.mixin) {
50 | env.mixins.push(code)
51 | return ''
52 | }
53 |
54 | let res = origCode.call(this, code, lang, escaped)
55 |
56 | if (!opts.interpolate) {
57 | res = res.replace(/^/, '')
58 | }
59 |
60 | if (opts.highlight) {
61 | const codeMask = code
62 | .split('\n')
63 | .map((v, i) => {
64 | i += 1
65 | const shouldHighlight = opts.highlight.some(number => {
66 | if (typeof number === 'number') {
67 | return number === i
68 | }
69 | if (typeof number === 'string') {
70 | const [start, end] = number.split('-').map(Number)
71 | return i >= start && (!end || i <= end)
72 | }
73 | return false
74 | })
75 | const escapedLine = v ? marked.escape(v) : ''
76 | return shouldHighlight
77 | ? `${escapedLine}`
78 | : `${escapedLine}`
79 | })
80 | .join('')
81 | res += `${codeMask}`
84 | }
85 |
86 | return `${res}
`
87 | }
88 |
89 | return hooks.process('extendMarkedRenderer', renderer)
90 | }
91 |
--------------------------------------------------------------------------------
/src/utils/parseCodeOptions.js:
--------------------------------------------------------------------------------
1 | export default opts => {
2 | if (opts) {
3 | try {
4 | // eslint-disable-next-line no-new-func
5 | const fn = new Function(`return ${opts}`)
6 | opts = fn()
7 | } catch (error) {
8 | console.error(
9 | `You're using invalid options for code fences, it must be JSON or JS object!\n${error.message}`
10 | )
11 | }
12 | }
13 | return opts || {}
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/prismLanguages.json:
--------------------------------------------------------------------------------
1 | {
2 | "javascript": "clike",
3 | "actionscript": "javascript",
4 | "arduino": "cpp",
5 | "aspnet": [
6 | "markup",
7 | "csharp"
8 | ],
9 | "bison": "c",
10 | "c": "clike",
11 | "csharp": "clike",
12 | "cpp": "c",
13 | "coffeescript": "javascript",
14 | "crystal": "ruby",
15 | "css-extras": "css",
16 | "d": "clike",
17 | "dart": "clike",
18 | "django": "markup",
19 | "erb": [
20 | "ruby",
21 | "markup-templating"
22 | ],
23 | "fsharp": "clike",
24 | "flow": "javascript",
25 | "glsl": "clike",
26 | "go": "clike",
27 | "groovy": "clike",
28 | "haml": "ruby",
29 | "handlebars": "markup-templating",
30 | "haxe": "clike",
31 | "java": "clike",
32 | "jolie": "clike",
33 | "kotlin": "clike",
34 | "less": "css",
35 | "markdown": "markup",
36 | "markup-templating": "markup",
37 | "n4js": "javascript",
38 | "nginx": "clike",
39 | "objectivec": "c",
40 | "opencl": "cpp",
41 | "parser": "markup",
42 | "php": [
43 | "clike",
44 | "markup-templating"
45 | ],
46 | "php-extras": "php",
47 | "plsql": "sql",
48 | "processing": "clike",
49 | "protobuf": "clike",
50 | "pug": "javascript",
51 | "qore": "clike",
52 | "jsx": [
53 | "markup",
54 | "javascript"
55 | ],
56 | "tsx": [
57 | "jsx",
58 | "typescript"
59 | ],
60 | "reason": "clike",
61 | "ruby": "clike",
62 | "sass": "css",
63 | "scss": "css",
64 | "scala": "java",
65 | "smarty": "markup-templating",
66 | "soy": "markup-templating",
67 | "swift": "clike",
68 | "tap": "yaml",
69 | "textile": "markup",
70 | "tt2": [
71 | "clike",
72 | "markup-templating"
73 | ],
74 | "twig": "markup",
75 | "typescript": "javascript",
76 | "vbnet": "basic",
77 | "velocity": "markup",
78 | "wiki": "markup",
79 | "xeora": "markup",
80 | "xquery": "markup",
81 | "builtin": [
82 | "markup",
83 | "xml",
84 | "html",
85 | "mathml",
86 | "svg",
87 | "css",
88 | "clike",
89 | "javascript",
90 | "js"
91 | ]
92 | }
--------------------------------------------------------------------------------
/src/utils/removeMarkdownExtension.js:
--------------------------------------------------------------------------------
1 | const RE = /\.md$/
2 |
3 | export default input => {
4 | let [path, hash] = input.split('#')
5 | if (RE.test(path)) {
6 | path = path.replace(RE, '')
7 | }
8 | return `${path}${hash ? `#${hash}` : ''}`
9 | }
10 |
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
18 |
19 | Example:
20 |
21 | ```markdown
22 |
27 | ```
28 |
29 |
30 |
31 | ## ``
32 |
33 | A small count and labeling component.
34 |
35 | | Prop | Type | Default | Description |
36 | | -------- | -------------------------------------------------------------------- | ------- | ----------------------- |
37 | | type | 'tip' | 'success' | 'warning' | 'danger' | N/A | Badge type |
38 | | color | `string` | N/A | Custom background color |
39 | | children | `string` | N/A | Badge text |
40 |
41 |
42 |
43 | Example:
44 |
45 | ```markdown
46 | - Feature 1 Badge
47 | - Feature 2 Tip
48 | - Feature 3 Success
49 | - Feature 4 Warning
50 | - Feature 5 Danger
51 | - Feature 6 Custom Color
52 | ```
53 |
54 | - Feature 1 Badge
55 | - Feature 2 Tip
56 | - Feature 3 Success
57 | - Feature 4 Warning
58 | - Feature 5 Danger
59 | - Feature 6 Custom Color
60 |
61 | ## ``
62 |
63 | Colored note blocks, to emphasize part of your page.
64 |
65 | | Prop | Type | Default | Description |
66 | | -------- | -------------------------------------------------------------------- | ------------------- | ------------------------------------------------- |
67 | | type | 'tip' | 'warning' | 'danger' | 'success' | N/A | Note type |
68 | | label | `string` `boolean` | The value of `type` | Custom note label text, use `false` to hide label |
69 | | children | `string` | N/A | Note content |
70 |
71 |
72 |
73 | Examples:
74 |
75 | ```markdown
76 |
77 |
78 | This is a note that details something important.
79 | [A link to helpful information.](https://docute.org)
80 |
81 |
82 |
83 |
84 |
85 |
86 | This is a tip for something that is possible.
87 |
88 |
89 |
90 |
91 |
92 |
93 | This is a warning for something very important.
94 |
95 |
96 |
97 |
98 |
99 |
100 | This is a danger for something to take action for.
101 |
102 |
103 | ```
104 |
105 |
106 |
107 | This is a note that details something important.
108 | [A link to helpful information.](https://docute.org)
109 |
110 |
111 |
112 |
113 |
114 |
115 | This is a tip for something that is possible.
116 |
117 |
118 |
119 |
120 |
121 |
122 | This is a warning for something very important.
123 |
124 |
125 |
126 |
127 |
128 |
129 | This is a danger for something to take action for.
130 |
131 |
132 |
133 | ## ``
134 |
135 | Embed [GitHub Gist](https://gist.github.com/) into your Markdown documents.
136 |
137 | | Prop | Type | Default | Description |
138 | | ---- | -------- | ------- | ----------- |
139 | | id | `string` | N/A | Gist ID |
140 |
141 | Example:
142 |
143 | ```markdown
144 |
145 | ```
146 |
147 |
148 |
149 | ## ``
150 |
151 | A customized `
13 | 
22 |