与 Marked我可以在实现过程中轻松覆盖/添加/更改词法分析器规则，这太棒了! 例如，我可以强制在哈希符号和文本之间使用空格来制作这样的标题:
var lexer = new marked.Lexer(options);
console.log(lexer);
lexer.rules.heading = /^\s*(#{1,6})\s+([^\n]+?) *#* *(?:\n+|$)/
console.log(marked.parser(lexer.lex('#hashtag?'), options));
//<p>#hashtag?</p>
console.log(marked.parser(lexer.lex('# heading?'), options));
//<h1 id="undefinedheading-">heading?</h1>
酷!
但有没有办法轻松地为 inlineLexer 做同样的事情？
就像我需要让人们能够添加带有下一个序列的图像:%[My Image](http://example.com/img.jpg)？
所以我修改了:
var inlineLexer = marked.InlineLexer;
inlineLexer.rules.link = /^[!%]{0,1}?\[((?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*)\]\(\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*\)/;
...
接下来我该做什么？ 如何将自定义 inlineLexer 绑定(bind)到标记实例？ 请告诉我如何做到这一点的例子!如何修改/添加自定义内联词法分析器规则？
最佳答案
我查看了 marked.js 的源代码，以找到一种方法来覆盖它的一部分，以便允许对内联词法分析器进行一些自定义，而无需更改库源或影响全局标记实例或原型(prototype)。
var renderer = new marked.Renderer();
var lexer = new marked.Lexer();
var parser = new marked.Parser();
var options = {
renderer: renderer,
gfm: true,
tables: false,
breaks: true,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
}
parser.inline = new marked.InlineLexer([], options);
parser.inline.rules = angular.copy(parser.inline.rules); // deep copy, otherwise global marked will be affected
parser.inline.rules.link = /^[!%]{0,1}?\[((?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*)\]\(\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*\)/;
renderer.link = function(href, title, text) {
// this is the standard link renderer that can be altered if desired ...
if (this.options.sanitize) {
try {
var prot = decodeURIComponent(unescape(href))
.replace(/[^\w:]/g, '')
.toLowerCase();
} catch (e) {
return '';
}
if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
return '';
}
}
var out = '<a href="' + href + '"';
if (title) {
out += ' title="' + title + '"';
}
out += '>' + text + '</a>';
return out;
}
function parse(src) {
parser.inline.links = src.links;
parser.tokens = src.reverse();
var out = '';
while (parser.next()) {
out += parser.tok();
}
return out;
};
function parseText(text) {
var lex = lexer.lex(text);
var r = parse(lex);
return r;
}
关于javascript - 如何为 marked.js 编写自定义 InlineLexer 规则？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26507341/
varstartx=0,starty=0,endx=12,endy=100;for(startx;startx<=endx;startx+=1){for(starty;starty<=endy;starty+=1){console.log(startx,endx,starty,endy);}}预期输出:0,12,0,1000,12,1,1000,12,2,100...0,12,100,1001,12,0,1001,12,1,100...12,12,100,100;EOOChrome39+上的输出0,12,0,1000,12,1,1000,12,2,100...0,12,10
当点为负时，我需要更改LineChart.js中的填充颜色(内部区域)。代码简单基础:$(document).ready(function(){varctx=$("#myChart").get(0).getContext("2d");vardata={labels:["January","February","March","April","May","June","July"],datasets:[{label:"MyFirstdat
我已经阅读了所有人们遇到$http不是函数的问题的帖子，看起来大部分是由于注入(inject)顺序错误所致。我的模块定义如下:angular.module("app",[]).controller("appCtrl",['$scope','$http',function($scope,$http){...$scope.makeCall=function($http){console.log("HERE");$http({method:'GET',url:<url}).then(func
我想按顺序处理一些promise。我有一个workingpieceofcode下面，但我想知道我是否将promise的链接过于复杂。我似乎正在创建大量新的闭包，我挠头想知道我是否遗漏了什么。这个函数有没有更好的写法:'usestrict';addElement("first").then(x=>{returnaddElement("second")}).then(x=>{returnaddElement("third")}).then(x=>{returnaddElement("fourth
我有一个包含地理位置结果的表格，用户可以在其中单击以在map中设置该位置。map已经加载，用户可能已经平移/滚动，所有这些位置可能都在视线之外。因此，当用户单击表中某个位置的按钮时，我需要检查该标记是否已在map中可见。并且仅当不可见时，才调用setView并放大该位置；否则，我只是更改标记的颜色(不平移，不缩放)。传单是否有任何API来检查图层/标记当前是否已在map中呈现？ 最佳答案 可能map.getBounds().contains(myMarker.getLatLng())引用资料:map.getBounds()返回当前m
我有一个问题，redux状态被成功更新，但react组件没有重新渲染，经过一些研究我相信[forceUpdate()][1]可以解决我的问题，但我是不确定实现它的正确方法，即在redux状态更新之后。我尝试在github上查找示例，但没有成功。 最佳答案 正如其他人所说，forceUpdate()基本上是一种hack。只要Prop和状态发生变化，您就可以免费获得更新。React和Redux可以无缝协作，因此请避免任何此类黑客行为。如果您的Redux状态正确更新而您的ReactView没有正确更新，那么您很可能没有以不可变的方式更新。
我们正在使用WebRTC开发从移动设备到计算机的视频流。移动设备可能会完全失去连接，计算机应该能够检测到。现在，视频刚刚卡住。但是EventHandlersofRTCPeerConnection都不是在这种情况下被调用。那么如何才能在另一个对等点上检测到这种连接失败呢？对等点如何首先检测连接建立时的连接问题？ 最佳答案 作为Firefox中的解决方法，您可以使用getStats来检测数据包是否停止传入:varfindStat=(m,type)=>[...m.values()].find(s=>s.type==type&a
我有一个使用HTML文件中的静态数据的数据表。使用“columnDefsdata”函数或“columnDefsrender”函数，我可以执行一些输出调整——根据它们的内容和它们在当前显示页面上的位置(不改变数据源)。但是，当用户更改显示的行数时，我需要重置并重做我对数据的调整，因为不同的单元格现在需要消隐，而之前消隐的条目可能需要再次显示。所以，我想做的是在“length.dt”事件(刚刚更改的显示行数)中调用something导致数据表重新呈现整个表，或重新加载整个数据(从而调用我的columnDefs渲染或columnDefs数据函数)这可能吗？还是我的方法有缺陷，我需要寻找其他方
嘿，所以我正在尝试使用Sequelize(用于postgreSQL的Node.jsORM)从数据库中查询，我正在尝试按日期范围分组，并计算该表中有多少项目。现在我的代码是Task.findAll({attributes:['createdAt'],group:'createdAt'})但如您所见，分组仅考虑确切的日期(包括秒数)，因此分组实际上毫无意义，因为无论如何都不会有重叠的项目具有完全相同的秒数。所以我希望它只是基于日、年和月进行分组。我假设它必须是类似sequelize.fn(...)的东西 最佳答案
请我为以下reactjs页面编写一个单元测试。exportdefaultclassCollapsibleextendsReact.Component{staticpropTypes={title:React.PropTypes.string,children:React.PropTypes.any,};render(){const{title}=this.props;return(<details><summary>{title}</summary>{this.props.children}</details>);}}跟着啧啧Here我在
varstartx=0,starty=0,endx=12,endy=100;for(startx;startx<=endx;startx+=1){for(starty;starty<=endy;starty+=1){console.log(startx,endx,starty,endy);}}预期输出:0,12,0,1000,12,1,1000,12,2,100...0,12,100,1001,12,0,1001,12,1,100...12,12,100,100;EOOChrome39+上的输出0,12,0,1000,12,1,1000,12,2,100...0,12,10
当点为负时，我需要更改LineChart.js中的填充颜色(内部区域)。代码简单基础:$(document).ready(function(){varctx=$("#myChart").get(0).getContext("2d");vardata={labels:["January","February","March","April","May","June","July"],datasets:[{label:"MyFirstdat
我已经阅读了所有人们遇到$http不是函数的问题的帖子，看起来大部分是由于注入(inject)顺序错误所致。我的模块定义如下:angular.module("app",[]).controller("appCtrl",['$scope','$http',function($scope,$http){...$scope.makeCall=function($http){console.log("HERE");$http({method:'GET',url:<url}).then(func
我想按顺序处理一些promise。我有一个workingpieceofcode下面，但我想知道我是否将promise的链接过于复杂。我似乎正在创建大量新的闭包，我挠头想知道我是否遗漏了什么。这个函数有没有更好的写法:'usestrict';addElement("first").then(x=>{returnaddElement("second")}).then(x=>{returnaddElement("third")}).then(x=>{returnaddElement("fourth
我有一个包含地理位置结果的表格，用户可以在其中单击以在map中设置该位置。map已经加载，用户可能已经平移/滚动，所有这些位置可能都在视线之外。因此，当用户单击表中某个位置的按钮时，我需要检查该标记是否已在map中可见。并且仅当不可见时，才调用setView并放大该位置；否则，我只是更改标记的颜色(不平移，不缩放)。传单是否有任何API来检查图层/标记当前是否已在map中呈现？ 最佳答案 可能map.getBounds().contains(myMarker.getLatLng())引用资料:map.getBounds()返回当前m
我有一个问题，redux状态被成功更新，但react组件没有重新渲染，经过一些研究我相信[forceUpdate()][1]可以解决我的问题，但我是不确定实现它的正确方法，即在redux状态更新之后。我尝试在github上查找示例，但没有成功。 最佳答案 正如其他人所说，forceUpdate()基本上是一种hack。只要Prop和状态发生变化，您就可以免费获得更新。React和Redux可以无缝协作，因此请避免任何此类黑客行为。如果您的Redux状态正确更新而您的ReactView没有正确更新，那么您很可能没有以不可变的方式更新。
我们正在使用WebRTC开发从移动设备到计算机的视频流。移动设备可能会完全失去连接，计算机应该能够检测到。现在，视频刚刚卡住。但是EventHandlersofRTCPeerConnection都不是在这种情况下被调用。那么如何才能在另一个对等点上检测到这种连接失败呢？对等点如何首先检测连接建立时的连接问题？ 最佳答案 作为Firefox中的解决方法，您可以使用getStats来检测数据包是否停止传入:varfindStat=(m,type)=>[...m.values()].find(s=>s.type==type&a
我有一个使用HTML文件中的静态数据的数据表。使用“columnDefsdata”函数或“columnDefsrender”函数，我可以执行一些输出调整——根据它们的内容和它们在当前显示页面上的位置(不改变数据源)。但是，当用户更改显示的行数时，我需要重置并重做我对数据的调整，因为不同的单元格现在需要消隐，而之前消隐的条目可能需要再次显示。所以，我想做的是在“length.dt”事件(刚刚更改的显示行数)中调用something导致数据表重新呈现整个表，或重新加载整个数据(从而调用我的columnDefs渲染或columnDefs数据函数)这可能吗？还是我的方法有缺陷，我需要寻找其他方
嘿，所以我正在尝试使用Sequelize(用于postgreSQL的Node.jsORM)从数据库中查询，我正在尝试按日期范围分组，并计算该表中有多少项目。现在我的代码是Task.findAll({attributes:['createdAt'],group:'createdAt'})但如您所见，分组仅考虑确切的日期(包括秒数)，因此分组实际上毫无意义，因为无论如何都不会有重叠的项目具有完全相同的秒数。所以我希望它只是基于日、年和月进行分组。我假设它必须是类似sequelize.fn(...)的东西 最佳答案
请我为以下reactjs页面编写一个单元测试。exportdefaultclassCollapsibleextendsReact.Component{staticpropTypes={title:React.PropTypes.string,children:React.PropTypes.any,};render(){const{title}=this.props;return(<details><summary>{title}</summary>{this.props.children}</details>);}}跟着啧啧Here我在