|
2 | 2 |
|
3 | 3 | jQuery.Syntax is a light-weight client-side syntax highlighter, which dynamically loads external dependencies (JavaScript & CSS) when required. It uses jQuery to make it cross-browser compatible and to simplify integration and integration with other systems. |
4 | 4 |
|
5 | | -For examples and documentation please see the main [project page][1]. |
6 | | - |
7 | | -[1]: http://www.codeotaku.com/projects/jquery-syntax |
8 | | - |
9 | 5 | ## Installation |
10 | 6 |
|
11 | | -jQuery.Syntax has two options for installation. Both options require a modern copy of [jQuery](http://jquery.com). A full set of installation instructions are [available online](http://www.codeotaku.com/projects/jquery-syntax/how-to-install). |
12 | | - |
13 | | -### Simple Installation |
14 | | - |
15 | | -A full distribution is included in `public/` and you can copy these files to your website, typically in a subdirectory appropriate for JavaScript. |
16 | | - |
17 | | -### Advanced Installation |
| 7 | +jQuery.Syntax is easily installed using bower. |
18 | 8 |
|
19 | | -The advanced option involves a local install of Ruby and several gems to compile and minify a complete distribution of jQuery.Syntax into a specific directory. The process is controlled through a file called `install.yaml` which has several configuration options. To use this method you need several dependencies: |
| 9 | + $ bower install jquery-syntax |
20 | 10 |
|
21 | | - $ gem install bundler && bundle install |
| 11 | +It has a `dist/` directory which follows standard conventions. |
22 | 12 |
|
23 | | -To install jQuery.Syntax into the standard 'public/' directory: |
| 13 | +### Advanced Configuration |
24 | 14 |
|
25 | | - $ rake install |
26 | | - |
27 | | -For more details on how to customize this process, please see the [Advanced Setup](http://www.codeotaku.com/projects/jquery-syntax/how-to-install/advanced-setup) documentation. |
| 15 | +jQuery.Syntax compiles and minifies it's code using uses Rake (Ruby) and [Sass](http://sass-lang.com). Please review the included `Rakefile` for more details. |
28 | 16 |
|
29 | 17 | ## Usage |
30 | 18 |
|
31 | 19 | jQuery.Syntax is typically used to highlight both block code elements and inline code elements. To highlight code, you first need to include several scripts in the `<head>` of your page: |
32 | 20 |
|
33 | | - <script src="jquery.min.js" type="text/javascript"></script> |
34 | | - <script src="jquery.syntax.min.js" type="text/javascript"></script> |
| 21 | + <!-- Put in your head tag --> |
| 22 | + <script src="jquery.min.js"></script> |
| 23 | + <script src="jquery.syntax.min.js"></script> |
| 24 | + |
35 | 25 | <script type="text/javascript"> |
36 | | - // This function is executed when the page has finished loading. |
37 | | - jQuery(function($) { |
38 | | - // This function highlights (by default) pre and code tags which are annotated correctly. |
39 | | - $.syntax(); |
40 | | - }); |
| 26 | + // This function is executed when the page has finished loading. |
| 27 | + jQuery(function($) { |
| 28 | + $.syntax(); |
| 29 | + }); |
41 | 30 | </script> |
42 | | - |
43 | | -In the `<body>` of your document, you can now include code and it will be automatically highlighted provided it uses the following two forms. |
44 | | - |
45 | | -### Inline Code Layout |
46 | | - |
47 | | -This is typically useful when discussing small blocks of classes in a paragraph, e.g. class names, short statements/expressions, etc: |
48 | | - |
49 | | - <p>The entry point for C code is typically the <code class="syntax clang">int main(int argv, char ** argv)</code> function.</p> |
50 | | - |
51 | | -### Block Code Layout |
52 | | - |
53 | | -This is typically useful when listing whole functions, classes, or entire files: |
54 | | - |
55 | | - <p>The following function returns 0 back to the controlling terminal:</p> |
56 | | - |
57 | | - <pre class="syntax clang"> |
58 | | - int main(int argv, char ** argv) |
59 | | - { |
60 | | - return 0; |
61 | | - } |
62 | | - </pre> |
63 | | - |
64 | | -You will need to escape code correctly using standard HTML escape sequences, e.g. `&`. As an alternative, you may prefer to use CDATA sections: |
65 | | - |
66 | | - <pre class="syntax javascript"><![CDATA[ |
67 | | - function hello () { |
68 | | - console.log("Hello World"); |
69 | | - }]]></pre> |
70 | | - |
71 | | -## Plugins |
72 | | - |
73 | | -There are several plugins available: |
74 | | - |
75 | | -- DokuWiki: <http://github.com/ioquatix/jquery-syntax-dokuwiki> |
76 | | -- WordPress: <http://github.com/ioquatix/jquery-syntax-wordpress> |
| 31 | + |
| 32 | + <!-- Your code to highlight --> |
| 33 | + <pre><code class="language-ruby">puts "Hello World"</code></pre> |
77 | 34 |
|
78 | 35 | ## Contributing |
79 | 36 |
|
|
0 commit comments