Wallogit.com
2017 © Pedro Peláez
Simple way to display highighted code in our content using highlight.js library.
Simple way to display highighted code in our content using highlight.js library. Works nice with markdown text inputs., (*1)
, (*2)
Add the following to your composer json:, (*3)
// composer.json
"require": {
...,
"components/highlightjs": "^9.0",
"kpicaza/code-highlight-bundle": "0.1.x-dev",
...
}
or open console and type, (*4)
composer require kpicaza/code-highlight-bundle=dev-master
Activate bundle in your kernel:, (*5)
// app/AppKernel.php
public function registerBundles()
{
$bundles = array(
...
new Kpicaza\Bundle\CodeHighlightBundle\CodeHighlightBundle(),
...
}
Enable routing (optional, only if you wish to play demo at http://you_site.com/highlight/hello/{name}):, (*6)
// app/config/routing.yml
code_highlight:
resource: "@CodeHighlightBundle/Resources/config/routing.yml"
prefix: /hightlight
Now we need to update Assetic configuration to enable js and css from highlight.js library, (*7)
// 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
Now we can import files:, (*8)
php app/console assetic:dump php app/console assets:install
Add stylesheet and init javascript in your template, (*9)
<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>
Add "hljs" and programming language name as classes to html "pre" tag to highlight content, for example:, (*10)
<pre><code>
class MyClass {
private $foo;
public function _construct($foo = null)
{
$this->foo = $foo;
}
}
</code></pre>
@todo, (*11)
http://highlightjs.readthedocs.org/, (*12)
Simple way to display highighted code in our content using highlight.js library.
MIT