Mr. Harmonies: #67: Prettify - Syntax highlighting of source code snippets in an html page

Ahad, 23 Jun 2013

#67: Prettify - Syntax highlighting of source code snippets in an html page

Emacs with syntax highlighting

Google Code Prettify adalah satu projek di google code yang boleh dicapai di link ini. Saya baru sahaja memasukkan skrip Prettify pada blog ini untuk membantu saya untuk highlight source code yang saya masukkan kedalam blog ini. Ia boleh mengenal dan melakukan syntax highlighter untuk beberapa bahasa seperti termasuk C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, dan Rust. It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl and Ruby. Ada beberapa lagi programming language yang boleh di support dengan menggunakan extension iaitu Apollo, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, Llvm, Lua, Matlab, MLs:F#, Ocaml,SML, Mumps, Nemerle, Pascal, Protocol buffers, R, S, RD, Scala, SQL, TCL, Latek, Visual Basic, CHDL, Wiki, XQ dan YAML. Cara untuk install script ini adalah amat mudah. Hanya perlu load script ini dengan menambahkan line <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true"></script> pada bahagian atas page (samaada di dalam <head> atau di permulaan <body>) dan ia sudah sedia untuk digunakan!

VIM pun ada syntax highlight

Untuk memasukkan snippet source code dengan syntax highlighter ini, anda perlu masukkannya diantara tag <pre class="prettyprint"> dan </pre>. Anda tak perlu memberitahu apakah language yang anda guna untuk pemilihan syntax highlighter kerana script ini akan cuba meneka secara automatik kod apakah yang anda gunakan. Tapi jika anda mahu lebih pasti (kerana bimbang script ini akan salah meneka kod anda, anda bolehlah tambahkan "language hint" pada bahagian class (contohnya <pre class="prettyprint lang-scm">. Untuk mengetahui lebih lanjut tentang ini, sila navigate ke link ini). Terdapat beberapa theme/skin yang boleh dipilih. Theme kesukaan saya adalah "Sunburst" kerana ia berlatarbelakang hitam seperti pada terminal dan mempunyai syntax highliter dengan warna yang lembut. Untuk menetapkan skin/theme pilihan anda, anda boleh specify pilihan anda dengan menambah ?skin=[skin pilihan anda] (contohnya ?skin=sunburst) pada akhir src dalam barisan load script tadi (jika anda memilih skin sunburst, maka <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=sunburst"></script>).

Ini adalah beberapa contoh source code snippets yang saya masukkan untuk tujuan demonstrasi script syntax highlighter ini. Saya tidak meletakkan "language hints" pada class kerana script ini mampu meneka apakah kod yang ia sedang proses. Ini adalah contoh dalam source code dalam bash, python, C dan HTML.

#!/bin/bash

# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line
function fib() {
  local a=1
  local b=1
  while true ; do
    echo $a
    local tmp=$a
    a=$(( $a + $b ))
    b=$tmp
  done
}

# output the 10th element of the series and halt
fib | head -10 | tail -1

#!/usr/bin/python2.4

def fib():
  '''
  a generator that produces the elements of the fibonacci series
  '''

  a = 1
  b = 1
  while True:
    a, b = a + b, a
    yield a

def nth(series, n):
  '''
  returns the nth element of a series,
  consuming the earlier elements of the series
  '''

  for x in series:
    n = n - 1
    if n <= 0: return x

print nth(fib(), 10)

#include <stdio.h>

/* the n-th fibonacci number.
 */
unsigned int fib(unsigned int n) {
  unsigned int a = 1, b = 1;
  unsigned int tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

main() {
  printf("%u", fib(10));
}

<html>
  <head>
    <title>Fibonacci number</title>
    <style><!-- BODY { text-decoration: blink } --></style>
    <script src="foo.js"></script>
    <script src="bar.js"></script>
  </head>
  <body>
    <noscript>
      <dl>
        <dt>Fibonacci numbers</dt>
        <dd>1</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>5</dd>
        <dd>8</dd>
        &hellip;
      </dl>
    </noscript>

    <script type="text/javascript"><!--
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.writeln(fib(10));
// -->
    </script>
  </body>
</html>

Ahad, 23 Jun 2013

#67: Prettify - Syntax highlighting of source code snippets in an html page

Tiada ulasan: