Giter Club home page Giter Club logo

qgoda-tt2-plugin-highlight's Introduction

Qgoda-TT2-Plugin-Highlight

This plug-in provides syntax highlighting for Qgoda.

SYNOPSIS

[% USE Highlight %]
...
[% Filter $Highlight "language-javascript" "line-numbers" "data-start"=5 %]
use "strict";

console.log("Hello, world!\n");
[% END %]

You can also use this plug-in without Qgoda.

DESCRIPTION

This Qgoda plug-in for the Template Toolkit allows you to create code blocks that can be syntax-highlighted in the browser. It works perfectly with PrismJS but other libraries that follow the recommendation for code blocks in HTML are equally supported.

The filter wraps its content into an HTML "code" element that in turn is wrapped into an HTML "pre". The above example from the synopsis would result in the following HTML:

<pre class="language-javascript line-numbers" data-start="5"><code>use "strict";

console.log("Hello, world!\n");</code></pre>

All positional arguments (those without an equals sign) to the filter are accumulated in the class attribute of the "pre" element. All named arguments (those with an equals sign) are converted into other attributes.

Leading and trailing whitespace around the source snippet is stripped off and discarded.

Important! If you are using Text::Markup::Hoedownas your markdown processor, you can alternatively use fenced codeblocks:

```javascript
use "strict";

console.log("Hello, world!\n");
```

This will result in the same HTML code but only with a class attribute of "language-javascript". If you need additional classes or attributes, you have to use this filter.

Important! It is your responsability to add all the required JavaScript and CSS to the page that is needed for syntax highlighting. See https://prismjs.com/ for an example, how to include the required assets.

Installation and Update

Like all Qgoda plug-ins, there is no need to install from CPAN (although you can).

With Node.JS Package Manager

Check that your Qgoda project directory contains a file package.json. If not, create one with either npm init or yarn init.

NPM

With NPM, you install the plug-in and update it to the latest version like this:

$ npm install --save-dev gflohr/qgoda-tt2-plugin-highlight
$ npm update gflohr/qgoda-tt2-plugin-hightlight

YARN

With Yarn, you install the plug-in and update it to the latest version like this:

$ yarn add gflohr/qgoda-tt2-plugin-highlight
$ npm upgrade gflohr/qgoda-plugin-tt2-hightlight

Either way, it will be recognized as a plug-in, the next time you start Qgoda.

From Version Control

You can also install the plug-in directly from git.

$ cd /path/to/your/qgoda/project
$ test -e _plugins || mkdir _plugins
$ git clone https://github.com/gflohr/qgoda-tt2-plugin-highlight

This will download the latest version into the directory _plugins where it will be recognized as a plug-in, the next time you start Qgoda.

From CPAN

You can also install from CPAN, if you can't help. One of the following two options should work:

cpanm

$ sudo cpanm Qgoda::TT2::Plugin::Highlight

The command cpanm comes with App-cpanminus.

cpan

$ sudo cpan install Qgoda::TT2::Plugin::Highlight

Copyright

Copyright (C) 2018 Guido Flohr [email protected], all rights reserved.

This library is free software. It comes without any warranty, to the extent permitted by applicable law. You can redistribute it and/or modify it under the terms of the Do What the Fuck You Want to Public License, Version 2, as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.

qgoda-tt2-plugin-highlight's People

Contributors

gflohr avatar

Stargazers

 avatar

Watchers

 avatar  avatar

qgoda-tt2-plugin-highlight's Issues

Allow Also Triple Backticks

It would be a nice feature if lines the first and the last line of the block got stripped off if they begin with triple backticks, for example:

[% FILTER $Highlight "language-perl" "line-numbers" %]

use strict;

[% END %]

That way you can combine the syntax highlighting of your editor with the advanced configuration of the filter plug-in.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.