Coder Social home page Coder Social logo

phrozenbyte / jquery-prettify Goto Github PK

View Code? Open in Web Editor NEW
5.0 3.0 2.0 220 KB

Use google-code-prettify to highlight sourecode with jQuery

License: GNU Lesser General Public License v3.0

JavaScript 100.00%
jquery jquery-plugin jquery-prettify google-code-prettify prettify syntax-highlighting javascript

jquery-prettify's Introduction

jQuery-Prettify 1.4

Use google-code-prettify to highlight sourecode with jQuery

Usage

Just download the sourcecode, upload the file to your webspace and load it. Obviously jQuery and google-code-prettify is required and must be loaded, too. The same applies to jQuery-XPath.

<script type="text/javascript" src="js/jquery.prettify.js"></script>

Insert your sourcecode as follows:

<div class="prettify">
  <pre>Sourecode here</pre>
</div>

All elements with the prettify CSS class will be prettified automatically, so you don't have to do anything. If you wan't to prettify another element (or an element you've added to the DOM later), just call .prettify().

.prettify() accepts an options object as the first parameter and an callback function (same as the callback option) as second parameter. You can use HTML data attributes to set options, too (e.g. data-linenums="false" to disable line numbering). The following options are available:

  • progress: If you want to display a progress bar while jQuery-Prettify prettifies your sourcecode, pass a jQuery selector (e.g. .progress) here.
  • linenums: Enable/disable line numbering (default: true).
  • auto: Prettify the element(s) automatically when ready (default: true). If you disable this, you must call .prettify('prettify') on your own.
  • callback: To be called function when an element has been prettified.

jQuery-Prettify has a great method to make your sourcecode more readable by expanding the sourcecode element to the width of the users browser window or as wide as necessary to prevent unwanted line breaks. You can call the following methods on the prettify element to let the box nicely grow or shrink appropriately.

  • .prettify('viewNoLineBreak'): Grow until no unwanted line breaks are necessary.
  • .prettify('viewWindowWidth'): Grow/shrink until the element is as wide as the users browser window.
  • .prettify('viewNormal'): Let the sourcecode appear like we've never changed its width.

License & Copyright

Copyright (C) 2012-2014 Daniel Rudolf http://www.daniel-rudolf.de/

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, version 3 of the License only.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

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.