README

使用 highlight.js 库简单地在我们的内容中显示高亮代码。与 markdown 文本输入配合良好。

##1. 安装

将以下内容添加到您的 composer json 中

// composer.json
"require": {
    ...,
    "components/highlightjs": "^9.0",
    "kpicaza/code-highlight-bundle": "0.1.x-dev",
    ...
}

或打开控制台并输入

composer require kpicaza/code-highlight-bundle=dev-master

在您的 kernel 中激活 bundle

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
      ...
      new Kpicaza\Bundle\CodeHighlightBundle\CodeHighlightBundle(),
      ...
}

启用路由（可选，仅当您希望在 http://you_site.com/highlight/hello/{name} 上运行演示时）

// app/config/routing.yml
code_highlight:
    resource: "@CodeHighlightBundle/Resources/config/routing.yml"
    prefix:   /hightlight

##2. 配置

现在我们需要更新 Assetic 配置以启用 highlight.js 库中的 js 和 css

// app/config/config.yml
# Assetic Configuration
assetic:
    ...
    bundles:        [ CodeHighlightBundle ] #enables bundle mapping by assetic
    ...
    assets:
        ...
        highlight_js: # enable javascript library
            inputs:
                - %kernel.root_dir%/../vendor/components/highlightjs/highlight.pack.min.js
            output: js/highlight.js
        # Import wanted themes for highlight see https://highlightjs.org/static/demo/
        # for example I'm going to enable two themes, monokai_sublime and github
        highlight_monokai_sublime_css:
            inputs:
                - %kernel.root_dir%/../vendor/components/highlightjs/styles/monokai_sublime.css
            output: css/highlight.css
        highlight_github_css:
            inputs:
                - %kernel.root_dir%/../vendor/components/highlightjs/styles/github.css
            output: css/highlight.css

现在我们可以导入文件

php app/console assetic:dump
php app/console assets:install

##3. 使用

###3.1 基本用法

在您的模板中添加样式表和初始化脚本

<html>
    <title>CodeHighlightBundle Demo</title>
    <head>
        {{ highlight_theme('monokai_sublime') }}
    </head>
    <body>
        ...
        <footer>
            ...
        </footer>
        <!-- Include all JavaScripts, compiled by Assetic -->
        <script src="{{ asset('js/jquery.js') }}"></script>
        {{ highlight_init_js() }}

    </body>
</html>

将 "hljs" 和编程语言名称作为类添加到 html "pre" 标签以高亮内容，例如

<pre><code>
    class MyClass {
        private $foo;

        public function _construct($foo = null)
        {
            $this->foo = $foo;
        }
    }

</code></pre>

###3.2 高级用法：@todo

##4. @todo

4.1 高级用法文档
4.2 仅将模板服务作为依赖项添加，而不是 service_container
4.3 测试
4.4 避免 wysiwyg 编辑器的文本格式化问题

##5. 库文档： http://highlightjs.readthedocs.org/

kpicaza / code-highlight-bundle

维护者

详细信息

README