网站备案审核时长查询：如何得知我的网站mx记录所需时间？
摘要：网站备案审核需要多久,查询网站mx记录,江门属于哪里,智联招聘网站怎么做微招聘信息markdown-it能够将markdown语法的内容转换为html内容，这样我们使用markdown语法写的笔记&am
网站备案审核需要多久,查询网站mx记录,江门属于哪里,智联招聘网站怎么做微招聘信息markdown-it能够将markdown语法的内容转换为html内容#xff0c;这样我们使用markdown语法写的笔记#xff0c;就可以转换作为网页使用了
Markdown语法
Markdown语法图文全面详解(10分钟学会)
基础使用
安装markdown-it
npm install markdown-it --save使用markdown-it …markdown-it能够将markdown语法的内容转换为html内容这样我们使用markdown语法写的笔记就可以转换作为网页使用了
Markdown语法
Markdown语法图文全面详解(10分钟学会)
基础使用
安装markdown-it
npm install markdown-it --save使用markdown-it
可以看到使用markdown-it我们把markdown语法的内容转为了html内容。我们发现md内容中标记的java语言代码会包裹再pre code标签中并且再highlight函数中回调。。 转化的html文档 style langscss.container {width: 600px;margin: 10px auto;textarea {outline: none;}}
/styletemplatediv classcontainertextarea v-modelmdContent rows6 stylewidth: 100%;/textareadiv v-htmlhtmlContent/div/div
/templatescript
import MarkdownIt from markdown-it
const MarkdownIt2 require(markdown-it)let md1 new MarkdownIt()
let md2 new MarkdownIt2()
console.log(md1);
console.log(md2);console.log(md1.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */
console.log(md2.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */const md new MarkdownIt({html: true,linkify: true,typographer: true,breaks: true,highlight: function(str, lang) {console.log(str-,str,lang-,lang);}
})export default {name: md2Html,data() {return {mdContent:,htmlContent:,}},watch: {mdContent(newVal,oldVal) {this.htmlContent md.render(newVal)}}
}
/script代码简单高亮1
根据我们前面学到的highlight.js的用法我们可以这么做在编辑的时候实时高亮就是在md转完html并且渲染完成后在$nextTick中高亮对应的html就可以了。
style langscss.container {width: 600px;margin: 10px auto;textarea {outline: none;}}
/styletemplatediv classcontainertextarea v-modelmdContent rows6 stylewidth: 100%;/textareadiv v-htmlhtmlContent/div/div
/templatescript
import MarkdownIt from markdown-it
const MarkdownIt2 require(markdown-it)import hljs from highlight.js
import highlight.js/styles/atom-one-dark.csslet md1 new MarkdownIt()
let md2 new MarkdownIt2()
console.log(md1);
console.log(md2);console.log(md1.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */
console.log(md2.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */const md new MarkdownIt({html: true,linkify: true,typographer: true,breaks: true,highlight: function(str, lang) {console.log(str-,str,lang-,lang);}
})export default {name: md2Html,data() {return {mdContent:,htmlContent:,}},watch: {mdContent(newVal,oldVal) {this.htmlContent md.render(newVal)this.$nextTick((){console.log(333);document.querySelectorAll(pre code).forEach((el) {hljs.highlightElement(el);});})}}
}
/script代码高亮2学习风宇blog
添加功能
代码高亮行号一键复制
style langscss
import url(https://fonts.font.im/css?familyRoboto);* {font-family: Roboto;
}.container {width: 600px;margin: 10px auto;textarea {outline: none;}
}/* 行号样式 */
.line-numbers-rows {position: absolute;pointer-events: none;top: 18px;font-size: 100%;left: 0.5em;width: 2.1em;letter-spacing: -1px;border-right: 1px solid #0e0f12;-webkit-user-select: none;-moz-user-select: none;user-select: none;background-color: #282c34;
}pre {position: relative;padding-left: 2.6em;line-height: 1.3em;
}.line-numbers-rowsspan {display: block;counter-increment: linenumber;
}pre {background-color: #282c34;border-radius: 8px;
}pre code {border-radius: 8px;
}.line-numbers-rowsspan:before {content: counter(linenumber);color: #999;display: block;padding-right: 0.8em;text-align: right;
}.language-name {position: absolute;top: 9px;color: #999999;right: 43px;font-size: 0.8em;-webkit-user-select: none;-moz-user-select: none;user-select: none;
}.copy-btn {position: absolute;right: 8px;top: 8px;background-color: #525252;border: none;padding: 3px 6px;border-radius: 3px;color: #cccccc;cursor: pointer;display: none;
}pre:hover .copy-btn {display: block;
}.copy-textarea {position: absolute;left: -9999px;top: -9999px;
}
/styletemplatediv classcontainertextarea v-modelmdContent rows6 stylewidth: 100%;/textareadiv v-htmlhtmlContent/div/div
/templatescript
import { getArticle } from /api/articleApiimport ClipboardJS from clipboard
console.log(ClipboardJS);import MarkdownIt from markdown-it
const MarkdownIt2 require(markdown-it)import hljs from highlight.js
import highlight.js/styles/atom-one-dark.csslet md1 new MarkdownIt()
let md2 new MarkdownIt2()
console.log(md1);
console.log(md2);console.log(md1.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */
console.log(md2.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */const md new MarkdownIt({html: true,linkify: true,typographer: true,breaks: true,highlight: function (str, lang) {/* str- ConfigurationEnableWebMvcEnableGlobalMethodSecurity(prePostEnabled true) // 因为要控制controller中的方法访问所以此注解要加到子容器中ComponentScan(basePackages com.zzhua.controller,excludeFilters {ComponentScan.Filter(type FilterType.ANNOTATION,classes Service.class)})public class MyWebConfig implements WebMvcConfigurer {Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {// 开启静态资源访问configurer.enable();}}lang- java {name: Java, aliases: Array(1), keywords: {…}, illegal: /\/|#/, contains: Array(23), …}*/console.log(str-, str, lang-, lang, hljs.getLanguage(java));/* span classhljs-metaConfiguration/spanspan classhljs-metaEnableWebMvc/spanspan classhljs-metaEnableGlobalMethodSecurity(prePostEnabled true)/span span classhljs-comment// 因为要控制controller中的方法访问所以此注解要加到子容器中/spanspan classhljs-metaComponentScan(basePackages quot;com.zzhua.controllerquot;,excludeFilters {ComponentScan.Filter(type FilterType.ANNOTATION,classes Service.class)})/spanspan classhljs-keywordpublic/span span classhljs-keywordclass/span span classhljs-title class_MyWebConfig/span span classhljs-keywordimplements/span span classhljs-title class_WebMvcConfigurer/span {span classhljs-metaOverride/spanspan classhljs-keywordpublic/span span classhljs-keywordvoid/span span classhljs-title function_configureDefaultServletHandling/spanspan classhljs-params(DefaultServletHandlerConfigurer configurer)/span {span classhljs-comment// 开启静态资源访问/spanconfigurer.enable();}}*/console.log(hljs.highlight(str, { language: lang }).value);if (lang hljs.getLanguage(lang)) {try {let highlightedHtml hljs.highlight(str, { language: lang }).value// 生成行号let lineNum highlightedHtml.split(\n).length - 1let lineNumbersRowsStart span aria-hiddentrue classline-numbers-rowslet lineNumbersRowsEnd /spanfor (let i 0; i lineNum; i) {lineNumbersRowsStart span/span}const lineNumbersRows lineNumbersRowsStart lineNumbersRowsEndlet languageName b classlanguage-name${lang}/b// 当前时间加随机数生成唯一的id标识var d new Date().getTime();if (window.performance typeof window.performance.now function) {d performance.now();}const codeIndex xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g,function (c) {var r (d Math.random() * 16) % 16 | 0;d Math.floor(d / 16);return (c x ? r : (r 0x3) | 0x8).toString(16);});// 复制功能需要一个textarea这个id需要前面加个字母啥的不能以数字开头let textAreaHtml textarea classcopy-textarea idcopy${codeIndex}${str}/textarealet copyButton button classcopy-btn iconfont icon-fuzhi data-clipboard-actioncopy data-clipboard-target#copy${codeIndex} typebutton/button/* 如果返回的不含pre code标签它会自己加上如果返回的含有pre code标签它就不加了 */return precode classlanguage-${lang} hljs${highlightedHtml}/code${lineNumbersRows}${languageName}${copyButton}${textAreaHtml}/pre;} catch (__) { }}return }
})export default {name: md2Html,data() {return {mdContent: ,htmlContent: ,}},mounted() {getArticle(29).then(data {this.mdContent data.mdContent})},watch: {mdContent(newVal, oldVal) {let _this thisthis.htmlContent md.render(newVal)this.$nextTick(() {var clipboard new ClipboardJS(.copy-btn);clipboard.on(success, function (e) {console.info(Action:, e.action);console.info(Text:, e.text);console.info(Trigger:, e.trigger);_this.$toast(success,复制成功了哦);e.clearSelection();});clipboard.on(error, function (e) {console.error(Action:, e.action);console.error(Trigger:, e.trigger);});})}}
}
/scriptmarkdown-it 扩展插件
有些markdown语法在没有装插件之前不能正常显示需要安装插件后才能正确显示。
使用示例
需要安装插件安装命令在后面
import MarkdownIt from markdown-it
let md1 new MarkdownIt()
console.log(未用markdown-it-sub时: , md1.render(H~2~0)); /* 未用markdown-it-sub时: pH~2~0/p */const md3 new MarkdownIt().use(require(markdown-it-sub))
console.log(使用markdown-it-sub时: , md3.render(H~2~0)); /* 使用markdown-it-sub时: pHsub2/sub0/p */console.log(md3.render(Hello from mars :satellite:));md3.use(require(markdown-it-emoji)) /* pHello from mars :satellite:/p */console.log(md3.render(Hello from mars :satellite:));/* pHello from mars /p */代码 安装插件
npm i markdown-it-sub markdown-it-sup markdown-it-mark markdown-it-abbr markdown-it-container markdown-it-deflist markdown-it-emoji markdown-it-footnote markdown-it-ins markdown-it-katex-external markdown-it-task-lists --savestyle langscss
import url(https://fonts.font.im/css?familyRoboto);* {font-family: Roboto;
}.container {width: 600px;margin: 10px auto;textarea {outline: none;}
}/* 行号样式 */
.line-numbers-rows {position: absolute;pointer-events: none;top: 18px;font-size: 100%;left: 0.5em;width: 2.1em;letter-spacing: -1px;border-right: 1px solid #0e0f12;-webkit-user-select: none;-moz-user-select: none;user-select: none;background-color: #282c34;
}pre {position: relative;padding-left: 2.6em;line-height: 1.3em;
}.line-numbers-rowsspan {display: block;counter-increment: linenumber;
}pre {background-color: #282c34;border-radius: 8px;
}pre code {border-radius: 8px;
}.line-numbers-rowsspan:before {content: counter(linenumber);color: #999;display: block;padding-right: 0.8em;text-align: right;
}.language-name {position: absolute;top: 9px;color: #999999;right: 43px;font-size: 0.8em;-webkit-user-select: none;-moz-user-select: none;user-select: none;
}.copy-btn {position: absolute;right: 8px;top: 8px;background-color: #525252;border: none;padding: 3px 6px;border-radius: 3px;color: #cccccc;cursor: pointer;display: none;
}pre:hover .copy-btn {display: block;
}.copy-textarea {position: absolute;left: -9999px;top: -9999px;
}
/styletemplatediv classcontainertextarea v-modelmdContent rows6 stylewidth: 100%;/textareadiv v-htmlhtmlContent/div/div
/templatescript
import { getArticle } from /api/articleApiimport ClipboardJS from clipboard
console.log(ClipboardJS);import MarkdownIt from markdown-it
const MarkdownIt2 require(markdown-it)import hljs from highlight.js
import highlight.js/styles/atom-one-dark.csslet md1 new MarkdownIt()
let md2 new MarkdownIt2()
console.log(md1);
console.log(md2);console.log(md1.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */
console.log(md2.render(# markdown-it rulezz!));/* h1markdown-it rulezz!/h1 */const md new MarkdownIt({html: true,linkify: true,typographer: true,breaks: true,highlight: function (str, lang) {/* str- ConfigurationEnableWebMvcEnableGlobalMethodSecurity(prePostEnabled true) // 因为要控制controller中的方法访问所以此注解要加到子容器中ComponentScan(basePackages com.zzhua.controller,excludeFilters {ComponentScan.Filter(type FilterType.ANNOTATION,classes Service.class)})public class MyWebConfig implements WebMvcConfigurer {Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {// 开启静态资源访问configurer.enable();}}lang- java {name: Java, aliases: Array(1), keywords: {…}, illegal: /\/|#/, contains: Array(23), …}*/console.log(str-, str, lang-, lang, hljs.getLanguage(java));/* span classhljs-metaConfiguration/spanspan classhljs-metaEnableWebMvc/spanspan classhljs-metaEnableGlobalMethodSecurity(prePostEnabled true)/span span classhljs-comment// 因为要控制controller中的方法访问所以此注解要加到子容器中/spanspan classhljs-metaComponentScan(basePackages quot;com.zzhua.controllerquot;,excludeFilters {ComponentScan.Filter(type FilterType.ANNOTATION,classes Service.class)})/spanspan classhljs-keywordpublic/span span classhljs-keywordclass/span span classhljs-title class_MyWebConfig/span span classhljs-keywordimplements/span span classhljs-title class_WebMvcConfigurer/span {span classhljs-metaOverride/spanspan classhljs-keywordpublic/span span classhljs-keywordvoid/span span classhljs-title function_configureDefaultServletHandling/spanspan classhljs-params(DefaultServletHandlerConfigurer configurer)/span {span classhljs-comment// 开启静态资源访问/spanconfigurer.enable();}}*/console.log(hljs.highlight(str, { language: lang }).value);if (lang hljs.getLanguage(lang)) {try {let highlightedHtml hljs.highlight(str, { language: lang }).value// 生成行号let lineNum highlightedHtml.split(\n).length - 1let lineNumbersRowsStart span aria-hiddentrue classline-numbers-rowslet lineNumbersRowsEnd /spanfor (let i 0; i lineNum; i) {lineNumbersRowsStart span/span}const lineNumbersRows lineNumbersRowsStart lineNumbersRowsEndlet languageName b classlanguage-name${lang}/b// 当前时间加随机数生成唯一的id标识var d new Date().getTime();if (window.performance typeof window.performance.now function) {d performance.now();}const codeIndex xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g,function (c) {var r (d Math.random() * 16) % 16 | 0;d Math.floor(d / 16);return (c x ? r : (r 0x3) | 0x8).toString(16);});// 复制功能需要一个textarea这个id需要前面加个字母啥的不能以数字开头let textAreaHtml textarea classcopy-textarea idcopy${codeIndex}${str}/textarealet copyButton button classcopy-btn iconfont icon-fuzhi data-clipboard-actioncopy data-clipboard-target#copy${codeIndex} typebutton/button/* 如果返回的不含pre code标签它会自己加上如果返回的含有pre code标签它就不加了 */return precode classlanguage-${lang} hljs${highlightedHtml}/code${lineNumbersRows}${languageName}${copyButton}${textAreaHtml}/pre;} catch (__) { }}return }
}) .use(require(markdown-it-sub)).use(require(markdown-it-sup)).use(require(markdown-it-mark)).use(require(markdown-it-abbr)).use(require(markdown-it-container)).use(require(markdown-it-deflist)).use(require(markdown-it-emoji)).use(require(markdown-it-footnote)).use(require(markdown-it-ins)).use(require(markdown-it-katex-external)).use(require(markdown-it-task-lists));console.log(未用markdown-it-sub时: , md1.render(H~2~0)); /* 未用markdown-it-sub时: pH~2~0/p */
const md3 new MarkdownIt().use(require(markdown-it-sub))
console.log(使用markdown-it-sub时: , md3.render(H~2~0)); /* 使用markdown-it-sub时: pHsub2/sub0/p */console.log(md3.render(Hello from mars :satellite:));
md3.use(require(markdown-it-emoji)) /* pHello from mars :satellite:/p */
console.log(md3.render(Hello from mars :satellite:));/* pHello from mars /p */export default {name: md2Html,data() {return {mdContent: ,htmlContent: ,}},mounted() {getArticle(29).then(data {this.mdContent data.mdContent})},watch: {mdContent(newVal, oldVal) {let _this thisthis.htmlContent md.render(newVal)this.$nextTick(() {var clipboard new ClipboardJS(.copy-btn);clipboard.on(success, function (e) {console.info(Action:, e.action);console.info(Text:, e.text);console.info(Trigger:, e.trigger);_this.$toast(success,复制成功了哦);e.clearSelection();});clipboard.on(error, function (e) {console.error(Action:, e.action);console.error(Trigger:, e.trigger);});})}}
}
/script