srcmini本文概述
语法高亮功能对于每个有一些代码要与他人共享的编程博客或项目都是必不可少的。由于简单, 开发人员可以使用JavaScript库在客户端浏览器上突出显示代码, 而不会出现任何问题或压力。但是有时候, 你可能需要一个无处不在的解决方案, 即使禁用了JavaScript, 你也会获得令人敬畏的语法高亮效果。
在本文中, 我们将向你展示如何在Symfony 3项目中不使用任何命令行工具但仅使用纯PHP的情况下在服务器端突出显示代码。
要求
要使用纯PHP(无需pygments或其他命令行工具)在服务器端突出显示代码, 建议你使用Highlight.php库。 highlight.php是用PHP编写的服务器端代码突出显示工具, 目前支持超过135种语言。这是由Geert Bergman撰写的Ivan Sagalaev编写的Highlight.js端口, 它充分利用了原始JavaScript项目的语言和样式定义。
重要的提示
我们认为, 该库被低估了, 所以请不要忘记在Github上为项目加注星标, 向开发人员展示你的支持, 谢谢！
要在你的Symfony 3项目中安装该库, 请在终端中运行以下命令(一次位于项目目录中)：
composer require scrivo/highlight.php安装后, 你将可以在Symfony 3项目中使用该库的Highlighter类。有关更多信息, 请访问Github上的官方库。
A.从控制器到视图
实现它的第一种方法是通过简单的流程控制器视图：
1.在控制器中准备突出显示的准备好的标记
该库的工作方式如下：创建荧光笔类的实例, 使用Highlight方法创建准备在视图上突出显示的标记。 Highlight方法期望将要突出显示的编程语言的标识符作为第一个参数, 而将要突出显示的代码作为第二个参数。
在控制器中, 你需要在控制器顶部包括Highlighter类, 并遵循前面提到的过程。请注意, 在以下示例中, 我们将准备突出显示标记发送到Twig视图：
注意
显然不需要EOF。这只是一个字符串的示例, 其中包含一些要突出显示的代码。
<?php
namespace AppBundle\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
// Include the Highlighter class
use Highlight\Highlighter;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction()
{
// 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 twig view that you want
// In this case the parameter "code" contains our code in the twig view
return $this->render("default/index.html.twig", [
"code" => $markupHighlightedCodeObject
]);
}
}如你所见, 它将向以下Twig视图发送参数即代码。该值将在后续步骤的Twig视图中使用。
2.在Twig View上渲染和样式标记
该视图将按照Highlight.js(pre标记内的类hljs <lang>的代码标记)的指导来呈现标记。由于我们的控制器, 在树枝中可访问的code参数是一个对象, 它包含2个属性, 即language和value, 其中包含用于突出显示服务器上的代码和所生成的代码的所用语言。
重要的是要看到, 一旦在视图中渲染了准备突出显示的标记, 就需要使用树枝的原始过滤器。原始过滤器将该值标记为”安全”, 这意味着在启用了自动转义的环境中, 该变量将不会被转义(生成的HTML实际上是HTML而不是HTML实体)。
注意
请记住, PHP生成的标记不包含任何样式, 仅包含可以在视图中用CSS突出显示的标记, 因此请不要忘记在Twig视图中包括(或创建)Highligh.js的任何突出显示主题。 。如下例所示, 我们使用CDN中的CSS Atelier Heath Dark主题进行测试：
{# default/index.html.twig #}
{% extends "base.html.twig" %}
{% block body -%}
{#
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 use the raw filter
#}
<pre>
<code class="hljs {{code.language}}">{{code.value|raw}}</code>
</pre>
{% endblock %}作为视图的结果, 我们突出显示的代码将如下所示：
很棒不是吗？而且你不需要JavaScript即可为你的代码获得相同的结果。
B.在Twig视图中使用过滤器
如果要以Symfony方式进行创建, 则可以为此创建一个Twig过滤器, 以直接在Twig视图上高调代码, 因此你只需要在视图中进行操作：
{{ "alert('Hello World');console.log('Some demo code');"|highlightCode("javascript")|raw }}并且你的代码将在视图上自动突出显示, 而不会弄乱你的控制器！
1.创建细枝扩展
首先, 你需要创建一个扩展程序, 以简化在上一个选项的控制器中创建的所有逻辑。此扩展创建了新的树枝过滤器highlightCode, 该代码期望将用于突出显示的语言(显然是带有应用过滤器的代码的变量)作为第一个参数：
<?php
// The namespace according to the bundle and the path
namespace AppBundle\Extensions;
// Include the highlighter class
use Highlight\Highlighter;
class TwigExtensions extends \Twig_Extension
{
protected $highlighter;
public function getFilters()
{
return array(
new \Twig_SimpleFilter('highlightCode', array($this, 'highlightCode')), );
}
public function __construct(){
$this->highlighter = new Highlighter();
}
public function highlightCode($code, $language){
// Create highlight object
$result = $this->highlighter->highlight($language, $code);
// Return ready to render markup
return "<pre>"
."<code class=\"hljs {$result->language}\">{$result->value}</code>"
."</pre>";
}
public function getName()
{
return 'TwigExtensions';
}
}然后继续在Symfony的services.yml文件中注册自定义Twig扩展名：
services:
twig.extension:
# the namespace with the name of the Twig Extensions created class
class: AppBundle\Extensions\TwigExtensions
tags:
- { name: twig.extension }然后, 你将可以在视图上轻松使用过滤器。请注意, 这是非常基础的, 因此你可以改进它以自动加载CSS文件, 而不是稍后在视图上手动添加它。
为了了解过滤器的工作原理, 我们将从控制器向Twig视图发送一些纯C ++代码(文本格式), 并将其突出显示：
<?php
namespace AppBundle\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction()
{
/**
* Some example code to highlight in JavaScript
*/
$plainCode = <<<EOF
#include <random>
#include <vector>
int main()
{
std::vector<int> v = {10, 15, 20, 25, 30};
std::random_device random_device;
std::mt19937 engine{random_device()};
std::uniform_int_distribution<int> dist(0, v.size() - 1);
int random_element = v[dist(engine)];
}
EOF;
// Send the markup with styles to some twig view that you want
// In this case the parameter "code" contains our code in the twig view
return $this->render("default/index.html.twig", [
"plainCode" => $plainCode
]);
}
}如你所见, 它是纯文本, 因此从数据库等中检索数据时, 可以以相同的方式使用它。
2.在视图中使用过滤器突出显示
现在, 在Twig视图中, 你将按以下方式使用HighlightCode过滤器突出显示代码：
{# default/index.html.twig #}
{% extends "base.html.twig" %}
{% block body -%}
{#
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/monokai.min.css" />
{#
Use the highlightCode filter with C++ language
Note: use raw filter to print Pure HTML
#}
{{ plainCode|highlightCode("cpp")|raw }}
{# Which outputs:
<pre><code class="hljs cpp">.. The Code Here..</code></pre>
#}
{% endblock %}请注意, 你也需要在视图中包括CSS, 但是如前所述, 你可以修改Twig过滤器以自动包括CSS文件。在这种情况下, 我们手动进行了此操作以帮助你了解突出显示过程的工作方式。使用twig的原始过滤器转义生成的HTML(在这种情况下是安全的)也很重要, 否则纯文本将出现在视图中。上一个视图将生成以下输出：
请记住, 支持超过135种语言, 因此请在此处查看项目中支持的语言。
编码愉快！
评论前必须登录！
注册