• Stars
    star
    129
  • Rank 279,262 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 14 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

jQuery.Syntax is a light-weight client-side syntax highlighter.

jQuery.Syntax

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.

Motivation

jQuery.Syntax was built at a time when syntax highlighting on the web was a bit of a mess - browser incompatibilities and limitations made it hard to do the right thing consistently. Rather than a single definition of "good", presenting code nicely in a browser was dictated by a set of trade-offs.

At the time, syntax highlighters were often all-or-nothing - this made it cumbersome for sites that only had a few pages with code on them. jQuery.Syntax was designed from the ground up to use dynamic loading of assets when required. On top of that, the implementation was built using a profiler and is fairly efficient.

It's a good library and it's fast, that's why I continue to maintain and develop it.

Isn't jQuery big?

Your right, small is pretty subjective.

jQuery as a dependency is based on a design from 2012. When browsers were a bit less "compatible", this was a good trade-off. These days, it could probably be removed, but it isn't worth the effort and for me personally it's a zero-cost dependency since I use it anyway on most of my sites.

The library is modular and only loads exactly the CSS and JS required. The minimised and gzipped library is 1.6Kbytes, this provide the top-level API and the dynamic loading functionality.

To highlight anything, you need to load the core parser and renderer code. It's 4.1Kbytes minified and gzipped. The CSS and Script files are tiny, most less < 1Kbyte, per language.

Compared to xyz?

All syntax highlighters are pretty good these days. But, there are some key differences worth considering:

  • How much does it load by default, even when not highlighting anything?
  • How efficient/fast is it when highlighting code?
  • How does line wrapping work?
  • Can you embed <span> and <a> elements?
  • Can it handle embedded code (e.g. JavaScript inside HTML)?
  • Is it easy to install?
  • Is it easy to customize?

Installation

jQuery.Syntax is easily installed using bower.

$ bower install jquery-syntax

It has a dist/ directory which follows standard conventions.

Advanced Configuration

jQuery.Syntax compiles and minifies it's code using uses Rake (Ruby) and Sass. Please review the included Rakefile and install.yaml for more details.

Usage

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:

<!-- Put in your head tag -->
<script src="jquery.min.js"></script>
<script src="jquery.syntax.min.js"></script>

<script type="text/javascript">
	// This function is executed when the page has finished loading.
	jQuery(function($) {
		$.syntax({theme: 'bright'});
	});
</script>

<!-- Your code to highlight -->
<pre><code class="language-ruby">puts "Hello World"</code></pre>

Stylesheet Compatibility

The following stylesheet sets some useful defaults and enables responsive tab-size indentation.

html {
	font-size: 16px;
	
	/* Fix odd text-size in `display: flex` elements on Safari iOS */
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 40em) {
	html {
		font-size: 18px;
		--tab-size: 4;
	}
}

@media (min-width: 80em) {
	html {
		font-size: 20px;
		--tab-size: 4;
	}
}

pre {
	/* -moz-tab-size is still required by Firefox */
	--tab-size: 2;
	tab-size: var(--tab-size);
	-moz-tab-size: var(--tab-size);
}

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

License

Released under the MIT license.

Copyright, 2011-2020, by Samuel G. D. Williams.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

covered

Ruby
191
star
2

relaxo

Relaxo is a transactional document database built on top of git.
Ruby
175
star
3

rack-freeze

A policy framework for implementing thread-safe rack middleware.
Ruby
118
star
4

latinum

Latinum is a framework for resource and currency calculations.
Ruby
109
star
5

turbo_test

Ruby
102
star
6

bake

An alternative to rake, with all the great stuff and a sprinkling of magic dust.
Ruby
98
star
7

fingerprint

Fingerprint is a simple tool that can be used to verify the contents of a directory.
Ruby
71
star
8

script-runner

This package will run various script files inside of Atom. It currently supports JavaScript, CoffeeScript, Ruby, and Python. You can add more.
JavaScript
62
star
9

trenni

A fast native templating system that compiles directly to Ruby code.
Ruby
50
star
10

ffi-clang

Ruby FFI bindings for libclang 3.4+.
Ruby
43
star
11

markly

Ruby wrapper for libcmark, the CommonMark markdown parser.
C
35
star
12

samovar

Ruby
31
star
13

graphviz

A ruby interface for GraphViz graph visualisation toolkit.
Ruby
29
star
14

process-group

Manages a group of processes which can run concurrently using fibers.
Ruby
24
star
15

wtf

Ruby
24
star
16

github-actions-bin

Arch Linux package for GitHub Actions remote runner.
Shell
23
star
17

relaxo-model

A simple business logic model for Relaxo (git-backed database) written in Ruby.
Ruby
20
star
18

bake-test-external

Ruby
16
star
19

activerecord-migrations

A gem to simplify activerecord migrations in non-rails projects.
Ruby
15
star
20

universal-style-guide

14
star
21

periodical

Periodical is a simple framework for working with durations and periods.
Ruby
14
star
22

rack-test-body

Ruby
13
star
23

activerecord-rack

Ruby
13
star
24

rexec

RExec is a tool for executing ruby processes and code both locally and remotely.
Ruby
13
star
25

process-daemon

Define a daemon using a Ruby class, provides common functionality like start, stop.
Ruby
13
star
26

rubykaigi-2022

Ruby
12
star
27

geospatial

Geospatial provides abstractions for dealing with geographical locations efficiently.
Ruby
12
star
28

plotty

Ruby
12
star
29

decode

Ruby
12
star
30

mapping

Ruby
10
star
31

kai

A simple LISP style interpreter written in C++
C++
10
star
32

rubykaigi-2023

Ruby
10
star
33

vips-thumbnail

Ruby
9
star
34

boolean

Useful methods for working with Booleans
Ruby
8
star
35

vips

Ruby extension for the vips image processing library.
Ruby
8
star
36

time-zone

Ruby
8
star
37

collada

A Ruby library for loading and manipulating Collada .dae files.
Ruby
7
star
38

dream

Dream is a cross-platform framework for making games with C++.
C++
7
star
39

bake-gem

Ruby
6
star
40

bake-modernize

Ruby
6
star
41

zonestar-p802q-fan-duct

C++
6
star
42

synco

A Ruby DSL for running synchronisation and backup tasks.
Ruby
6
star
43

relaxo-query-server

The Relaxo Query Server provides support for executing CouchDB functions using Ruby.
Ruby
5
star
44

shell-environment

Provides a hook for accessing the user's login environment, e.g. PATH, etc, even when running from a non-login shell environment.
JavaScript
5
star
45

ffi-native

Ruby
5
star
46

fiber-storage

Ruby
5
star
47

hypercube2

OpenSCAD
5
star
48

parallel-merge-sort

A implementation of a fast lock-free parallel merge sort algorithm.
C++
5
star
49

git-heatmap

Ruby
4
star
50

goblin-hacker

Goblin Hacker is a save-game editor for Eschalon.
Objective-C
4
star
51

ioquatix

3
star
52

telescopic-tube-clamp

OpenSCAD
3
star
53

transform-flow-capture-ios

A tool for capturing video stream data sets for iOS devices.
Objective-C
3
star
54

presentations

Ruby
3
star
55

zork

Python
3
star
56

bake-test

Ruby
3
star
57

transform-flow

Transform Flow is a visualisation tool for mobile outdoor augmented reality data sets.
C++
3
star
58

transform-flow-capture-android

Java
3
star
59

jquery-xframe

A simple client-side include system using AJAX.
Ruby
3
star
60

tileshift

A genetic algorithm based platform game for Ludam Dare 2012.
JavaScript
3
star
61

print-agent

PrintAgent is a simple authentication system for CUPS.
Ruby
3
star
62

zonestar-p802q-bracing

OpenSCAD
3
star
63

build-environment

Ruby
3
star
64

bake-releases

Ruby
2
star
65

air-quality

C
2
star
66

jquery-syntax-dokuwiki

jQuery.Syntax DokuWiki Plugin.
PHP
2
star
67

hanging-door-roller

OpenSCAD
2
star
68

xapian-core

The latest Xapian core and Ruby bindings.
Ruby
2
star
69

transform-flow-browser-ios

An augmented reality framework using transform flow motion models for iOS.
Objective-C
2
star
70

activerecord-cursor

Ruby
2
star
71

activerecord-blanks

Ruby
2
star
72

jquery-syntax-wordpress

jQuery.Syntax WordPress Plugin
PHP
2
star
73

autocoverage

Ruby
2
star
74

fiber-annotation

Ruby
2
star
75

xapian-rack

Easily integrate Xapian with Rack.
Ruby
2
star
76

jquery-menu

jQuery.Menu is a simple pop-up menu script.
JavaScript
2
star
77

types

Ruby
2
star
78

vulkan-ruby

Ruby
2
star
79

xapian-indexer

Xapian Indexer is an indexing spider written in Ruby and based on Xapian
Ruby
2
star
80

bake-bundler

Ruby
2
star
81

geospatial-kml

Ruby
2
star
82

many

Ruby
1
star
83

utopia-gallery

An extension for utopia for displaying photo galleries.
Ruby
1
star
84

rack-go-http-client-redirect-bug

Ruby
1
star
85

dispatch-benchmark

Objective-C++
1
star
86

build-files-monitor

Ruby
1
star
87

build-makefile

Ruby
1
star
88

transform-flow-data

Sample data sets for Transform Flow.
1
star
89

build-dependency

Ruby
1
star
90

utopia-analytics

Ruby
1
star
91

activerecord-configurations

Manage multiple databases in Rails 5 and Rails 6 with elegance.
Ruby
1
star
92

bake-github-pages

Ruby
1
star
93

matx-case

OpenSCAD
1
star
94

eventplayer

EventPlayer is a simple JavaScript class to synchronise external events with <audio> and <video> tags.
JavaScript
1
star
95

www.codeotaku.com

My personal website.
JavaScript
1
star
96

computer-science-posters

1
star
97

post_remote_log

Post Remote Log is a simple multi-destination logging system.
Ruby
1
star
98

dream-examples

Examples demonstrating the various features of the Dream framework.
C++
1
star
99

build-graph

Build::Graph is a framework for build systems, with specific functionality for dealing with file based processes.
Ruby
1
star
100

Urban-Navigation

Navigation for urban environments.
Objective-C
1
star