本文概述
语法高亮功能对于每个有一些代码要与他人共享的编程博客或项目都是必不可少的。由于简单, 开发人员可以使用JavaScript库在客户端浏览器上突出显示代码, 而不会出现任何问题或压力。但是有时候, 你可能需要一个无处不在的解决方案, 即使禁用了JavaScript, 你也会获得令人敬畏的语法高亮效果。
在本文中, 我们将向你展示如何在服务器端突出显示代码, 而无需任何命令行工具, 而仅在Laravel项目中使用纯PHP。
要求
要使用纯PHP(无需pygments或其他命令行工具)在服务器端突出显示代码, 建议你使用Highlight.php库。 highlight.php是用PHP编写的服务器端代码突出显示工具, 目前支持超过135种语言。这是由Geert Bergman撰写的Ivan Sagalaev编写的Highlight.js端口, 它充分利用了原始JavaScript项目的语言和样式定义。
重要的提示
我们认为, 该库被低估了, 所以请不要忘记在Github上为项目加注星标, 向开发人员表示支持。
要在你的Laravel项目中安装该库, 请在终端中运行以下命令(一次位于项目目录中):
composer require scrivo/highlight.php
安装后, 你将能够在Laravel项目中使用该库的Highlighter类。有关更多信息, 请访问Github上的官方库。
A.从控制器到视图
实现它的第一种方法是通过简单的流程控制器视图:
1.在控制器中准备突出显示的准备好的标记
该库的工作方式如下:创建荧光笔类的实例, 使用Highlight方法创建准备在视图上突出显示的标记。 Highlight方法期望将要突出显示的编程语言的标识符作为第一个参数, 而将要突出显示的代码作为第二个参数。
在控制器中, 你需要在控制器顶部包括Highlighter类, 并遵循前面提到的过程。请注意, 在以下示例中, 我们将准备突出显示标记发送到刀片视图:
注意
显然不需要EOF。这只是一个字符串的示例, 其中包含一些要突出显示的代码。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
// Include the Highlighter class
use Highlight\Highlighter;
class DefaultController extends Controller
{
/**
* Index route
*
* @return Response
*/
public function index()
{
// Create a new instance of Highlighter
$highlighter = new Highlighter();
// Define the language that you want to use to highlight
$language = "javascript";
/**
* Some example code to highlight in JavaScript
*/
$code = <<<EOF
var DebugLibExample = {
toggleDebug = function(s) {
_f.debug = s ? !!s.debug : false;
}, logger = function(msg, type) {
if (_f.debug) {
type = type || 'log';
var logAction = {
'error': function(m) {
console.error('Chameleon.js:', m);
}, 'warn': function(m) {
console.warn('Chameleon.js:', m);
}, 'log': function(m) {
console.log('Chameleon.js:', m);
}
};
if (typeof msg === 'undefined') {
logAction.error('Msg given to logger is undefined!');
} else {
if (logAction.hasOwnProperty(type)) {
logAction[type](msg);
} else {
logAction.error(['Unknown logAction type!', type]);
}
}
}
}
};
EOF;
// Create the markup with styles ready to highlight in the view
// as first argument the language type and as second the code
$markupHighlightedCodeObject = $highlighter->highlight($language, $code);
// Send the markup with styles to some blade view (default.blade.php) that you want
// In this case the parameter "code" contains our code in the view
return view("default", [
"code" => $markupHighlightedCodeObject
]);
}
}
如你所见, 它将向以下Twig视图发送参数即代码。该值将在后续步骤的Twig视图中使用。
2.在Blade View上渲染和样式标记
该视图将按照Highlight.js(pre标记内的类hljs <lang>的代码标记)的指导来呈现标记。由于我们的控制器, 在树枝中可访问的code参数是一个对象, 该对象包含2个属性, 即language和value, 其中包含用于突出显示服务器上的代码和所生成的代码的所用语言。
重要的是要看到, 一旦在视图中渲染了准备突出显示的标记, 就需要使用树枝的原始过滤器。原始过滤器将该值标记为”安全”, 这意味着在启用了自动转义的环境中, 该变量将不会被转义(生成的HTML实际上是HTML而不是HTML实体)。
注意
请记住, PHP生成的标记不包含任何样式, 仅包含可以在视图中用CSS突出显示的标记, 因此请不要忘记在Twig视图中包括(或创建)Highligh.js的任何突出显示主题。 。如下例所示, 我们使用CDN中的CSS Atelier Heath Dark主题进行测试:
{{--
Insert Highlight.js styles from CDN
or your own local css file
--}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-heath-dark.min.css" />
{{--
Render the pre element with the code tag inside and respective classes.
Note: don't forget to print the code generated by the library without
escaping its content. With blade you can print it easily using {!! wont_escaped !!}
--}}
<pre>
<code class="hljs {{ $code->language }}">{!! $code->value !!}</code>
</pre>
作为视图的结果, 我们突出显示的代码将如下所示:
很棒不是吗?而且你不需要JavaScript即可为你的代码获得相同的结果。请记住, 支持超过135种语言, 因此请在此处查看项目中支持的语言。
编码愉快!
评论前必须登录!
注册