棱镜相机_棱镜线号插件

棱镜相机

The Mozilla Developer Network (MDN) is in the midst of a remodel (sorry for the spoiler) and we've been implementing features incrementally.  One larger front-end change we'll be implementing is using the PrismJS for document code syntax highlighting.  One requirement of MDN's syntax highlighter is that line numbers are displayed, a functionality not provided by Prism.  Prism does provide a line-highlighting plugin but not a line-numbering plugin, so I used that plugin as my base and simply simplified it to provide numbers for a lines.

Mozilla开发人员网络(MDN)正在进行重构(抱歉，扰流板)，并且我们一直在逐步实现功能。 我们将要实现的一项更大的前端更改是使用PrismJS突出显示文档代码语法。 MDN语法突出显示工具的一项要求是显示行号，Prism未提供此功能。 Prism确实提供了突出显示行的插件，但没有提供行号插件，因此我以该插件为基础，并简单地对其进行了简化以提供行号。

CSS (The CSS)

The CSS here is copied from the line-highlighting plugin.  I've changed the attribute to data-number, which we'll use instead of data-line, and I've changed the colors used for the line background:

此处CSS是从突出显示行的插件复制的。 我已将属性更改为data-number，我们将使用它代替数据行，并且将行背景的颜色更改为：

pre[data-number] {
	position: relative;
	padding: 1em 0 1em 3em;
}

.line-number {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism's padding-top */

	background: transparent;
	
	pointer-events: none;
	
	line-height: inherit;
	white-space: pre;
}

	.line-number:before,
	.line-number[data-end]:after {
		content: attr(data-start);
		position: absolute;
		top: .4em;
		left: .6em;
		min-width: 1em;
		padding: 0 .5em;
		color: #999;
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		border: 0;
	}
	
	.line-number[data-end]:after {
		content: attr(data-end);
		top: auto;
		bottom: .4em;
	}

Of course you can style the line number element to however you'd like, but this CSS keeps styles fairly consistent with the line-highlighting plugin.

当然，您可以根据需要设置线号元素的样式，但是此CSS可以使样式与突出显示行的插件保持一致。

JavaScript (The JavaScript)

Here's the JavaScript portion for the plugin in all its glory:

这是插件的所有功能JavaScript部分：

/*
	This plugins was created based on the Prism line-numbering plugin.
	This plugin aims to number all lines and is independent of highlighting.
*/
(function(){

if(!window.Prism || !document.querySelectorAll) {
	return;
}

function $$(expr, con) {
	return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}
    
function numberLines(pre) {
	var offset = +pre.getAttribute('data-line-offset') || 0;
	var lineHeight = parseFloat(getComputedStyle(pre).lineHeight);
	var code = pre.querySelector('code');
	var numLines = code.innerHTML.split('\n').length;
	pre.setAttribute('data-number', '');

	for (var i=1; i <= numLines; i++) {
		var line = document.createElement('div');
		line.className = 'line-number';
		line.setAttribute('data-start', i);
		line.style.top = (i - offset - 1) * lineHeight + 'px';
		
		(code || pre).appendChild(line);
	}
}

Prism.hooks.add('after-highlight', function(env) {
	var pre = env.element.parentNode;
	
	if (!pre || !/pre/i.test(pre.nodeName)) {
		return;
	}

	$$('.line-number', pre).forEach(function (line) {
		line.parentNode.removeChild(line);
	});
	
	numberLines(pre);
});

})();

This code is also based on the syntax-highlighting plugin's code, but much more simplified because there's less line-numbering logic.

该代码也基于语法高亮插件的代码，但由于行号逻辑较少，因此更加简化。

If there's enough interest in what I have, I can make a GitHub repo for the plugin.  I haven't to this point because I believe this plugin could/should be merged with the line-highlighting plugin, since in many cases, developers reference line numbers.  In any event, this plugin may be what you're looking for.  Let me know if you have updates or ideas!

如果对我所拥有的东西有足够的兴趣，我可以为该插件制作一个GitHub存储库。 我到目前为止还没有，因为我相信这个插件可以/应该与突出显示行的插件合并，因为在很多情况下，开发人员都参考行号。 无论如何，您可能正在寻找这个插件。 让我知道您是否有更新或想法！

翻译自: https://davidwalsh.name/prism-line-number-plugin

棱镜相机