2. 程式人生 > >記一次 VUE 使用marked.js

記一次 VUE 使用marked.js

阿新 • • 發佈：2019-02-15

第一行祭天

話說，想學一下marked.js 於是有了如下操作

1. npm i marked -S

2. 引入 import marked from 'marked'

3. 建立物件 let renderMD = new marked.Renderer()

4. 配置如下

marked.setOptions({ renderer: rendererMD, gfm: true, tables: true, breaks: false, pedantic: false, sanitize: false, smartLists: true, smartypants: false})

5. vue 元件  

data () {return { input: '# hello `java` ' } }, computed: {compiledMarkdown: function () {returnmarked(this.input, { sanitize: true }) } }

6. template 

<div v-html="compiledMarkdown"></div>

完整如下

<template> <div id="app"> <div v-html="compiledMarkdown"></div
> </div></template><script>importmarkedfrom'marked'varrendererMD=newmarked.Renderer()marked.setOptions({ renderer: rendererMD, gfm: true, tables: true, breaks: false, pedantic: false, sanitize: false, smartLists: true, smartypants: false})exportdefault { name: 'App',data
() {return { input: '# hello `java` ' } }, computed: {compiledMarkdown: function () {returnmarked(this.input, { sanitize: true }) } }}</script>

相關推薦

記一次 VUE 使用marked.js

第一行祭天話說，想學一下marked.js 於是有了如下操作1. npm i marked -S2. 引入 import marked from 'marked'3. 建立物件 let renderMD = new marked.Renderer()4. 配置如下marked

記一次PHP實現JS的無符號右移(>>>)

cti UNC 爬蟲 val 無符號 ret IV 使用 pri 舉例： JS: 5>>>2 PHP function uright($a, $n) { $c = 2147483647 >> ($n - 1);

記一次 VUE 專案優化實踐

愛康體檢寶 PC（www.tijianbao.com/) 算是一個“老”專案，為什麼說“老”呢，因為在前端技術日新月異，每天都有新知識、新概念，甚至新框架的今天，它還是基於vue-cli 2.x、webpack 3.x構建，顯然有些老了。其次，在早期開始這個專案的時候，由於倉促上線，也沒有過多的考慮效能及載入

記一次 vue + mongodb + nodejs 小專案開發

首先梳理專案流程： 1.前後端分離，前端使用vue編寫靜態介面，後端使用node提供介面， 2. 前端開發時通過Vue-Cli中提供的proxyTable進行代理，由此可跨域呼叫Node編寫的API 那就開始吧！ 一.專案搭建 1.安裝vue-cli    npm

記一次 vue 打包的問題

事件的經過：一開始採取了 vue 、axaio、vue-router 等不打包在一起的方式，，後來發現總專案並不大，就想把它們都打包在一起算了，，，然後問題出來了1、連線進專案的 ,mint 的一些元件找不到import {Toast,Indicator,Loadmore ,

記一次奇葩的Js劫持事件

最近，專案突發狀況，之前開發的一個手機端APP內嵌H5頁面突然異常。現象是重新整理頁面後，有很大概率頁面卡死在資料載入階段。於是聯絡App開發人員，出調試包。開始除錯。 開始除錯後，首先發現頁面載入時傳送了一個奇怪的請求－http://8.525cm.com/v2/v.ph

記一次利用vue.js完成的h5與app的互動

嘮叨：最近接收一個用vue寫的專案，對我來說甚是頭大。不得不說這是對傳統前端的一次大過濾，之前仗著html，css,js混飯吃的前端兒們，壓力越來越大，我就是這樣的一個例子。壓力越大，只要不放棄，成長的也越快啊，所以，咬牙就咔咔開始幹。 需求：一個H5分享頁面

記一次非常無語的生成柱狀圖，js，ecshop。

width ecs fun ner text nbsp real mov span 如題，無語且非常郁悶。 要求是根據查詢出來的數據動態生成柱狀圖。但是ecshop的查詢ajax回調都是已經封裝好了的。根本就不能改。 無奈之下只好百度了一個畫柱狀圖的代碼，每隔2秒

記一次基於vue的spa多頁簽實踐經驗

ofo ace 加載 名稱 mman date 頁簽 一鍵安裝 route 前言 最近收到一個這樣的需求,要求做一個基於 vue 和 element-ui 的通用後臺框架頁,具體要求如下: 要求通用性高,需要在後期四十多個子項目中使用，所以大部分地方都做成可配置的.

記一次JS標簽的坑

jquery code ren clas 技術 htm com 簡單 ima 項目中遇到的問題： 原來的代碼： <script language="javascript" src="${pageContext.request.contextPath }/js/uti

記一次nginx部署Vue靜態頁面

前言 用Vue寫了個部落格，第一次打包後正式部署到伺服器上，將其中遇到的問題，及參考的資料分享一下。 伺服器準備 本次部署使用的阿里雲的ecs雲伺服器，系統為ubuntu16.04，由於購買的香港地區的伺服器，因此無需備案。使用香港伺服器有以下優缺點： 優點

記一次Python3爬蟲利用pyppeteer得到網站js加密後的密文

分析的是一個航空網站，其實是我再找python執行js程式碼的資料的時候，發現了一個博主分析了這個網站的加密過程，然後我去跟著操作的時候，發現網站的加密部分程式碼發生了變化，不過在我不小心把網頁關了之後，我實在找不到那篇文章了。。。。。所以我再說一下整個的分析過

記一次前臺js低階問題的排查

之前前臺都是用的flex，換了公司之後用js,而且還是前後臺分離，自己也不用寫前臺，最近接收一個小專案，不是前後臺的分離的，就自己搞了一下，寫前臺的時候遇到 function定義了卻找不到的問題，這種問題一般都是作用域的問題，如下 當我點選的時候，提示函式未定義，就是因

記一次對vue雙向繫結的理解

之前有看過一次vue雙向繫結原理實現相關的部落格，看得似懂非懂的，然後也就擱淺了。 昨天腦海裡又突然燃起了要不這塊搞懂的衝動，於是乎又開始了一輪部落格轟炸，綜合研究了多位大神寫得關於vue雙向繫結的實現原理，然後結合自己的一些理解，就有了這篇文章了。

記一次產線的JS精度丟失

最近生產上出現了一次JS精度丟失的現象，這個問題解決起來不是很難， 但是對於為什麼會出現這種情況進行了思考，得到了一些體會，Mark 一下。 首先：這個請求是Ajax請求，如果正常的post或者get 請求是不會出現這種問題，原因後續會講。 首先：先來說

網路爬蟲之記一次js逆向解密經歷

1 引言 數月前寫過某網站（請原諒我的掩耳盜鈴）的爬蟲，這兩天需要重新採集一次，用的是scrapy-redis框架，本以為二次爬取可以輕鬆完成的，可沒想到爬蟲啟動沒幾秒，出現了大堆的重試提示，心裡頓時就咯噔一下，悠閒時光估計要結束了。 仔細分析後，發現是獲取店鋪列表的請求出現問題，通過瀏覽器抓包，發現請求

記一次mapreduce讀取不到輸入文件的問題

mapreduce 過濾器hdfs上輸入文件所在包含兩個目錄，分別是： /20170503/shoplast/ /20170503/shop/但是我想過濾掉shop，只把shoplast作為輸入故我實現了過濾器如下： public static class Fi

記一次阿裏電面經歷

art 存儲空間 自由 結束 eas 大型 特定 easy col 昨天下午（3/19）三點多鐘，接到了一個杭州的電話，是阿裏的。問我是否方便聊聊。我說我在上課，四點下課。然後他就四點多鐘的時候又打了一次過來。項目經歷上來就問我有無大型項目的經歷。不好意思，我說無。。。又

記一次完整的安全技術解決方案遭遇成本考驗後的“退步與博弈”

架構師 互聯網 解決方案 防火墻 高可用 寫在前面，出於保護客戶隱私和堅守網工的職業道德素養，本文不得出現的所有完整ip、客戶名稱、信息、以及詳細的業務模型闡述。最近確實走心的在分享案例，2017年5月21日在家裏寫了近四小時，女票已經暴走，請大家掩護我！！！！！

記一次與用戶的親密接觸

分類 多用戶 興趣 代碼 相關數 解答 後端 現在 拉取 眾所周知，埋點在互聯網時代可謂重要至極，是了解用戶行為的基礎。優雲Web自從上線以來陸續引來很多用戶嘗鮮，很多用戶對於優雲Web的埋點功能都是充滿濃厚的興趣，以下問答是小編在GOPS大會上與用戶的對話實錄。 Q1：看