iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
1
Modern Web

30天學習30套前端技術(2018年)系列 第 10

[十分鐘學習] highlight.js - 程式碼上色外掛

example1

針對Web程式碼所做的高亮顯示上色

GitHub Star: 11,300
Javascripting Overall: 90%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: BSD 3-clause "New" or "Revised" License


《安裝》

  • CDN

      <!-- highlight.js v9.12.0 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    

《範例》

  • 套用JavaScript模板

      <pre>
      	<!-- 
      		程式語言類別(列表[註1])
      		javascript: JavaScript
      	-->
      	<code class="javascript">
      		...
      	</code>
      </pre>
      <script>
      	hljs.initHighlightingOnLoad();
      </script>
    

    [註1]

    類別 描述
    1c 1C
    abnf ABNF
    accesslog Access logs
    ada Ada
    armasm, arm ARM assembler
    avrasm AVR assembler
    actionscript, as ActionScript
    apache, apacheconf Apache
    applescript, osascript AppleScript
    asciidoc, adoc AsciiDoc
    aspectj AspectJ
    autohotkey AutoHotkey
    autoit AutoIt
    awk, mawk, nawk, gawk Awk
    axapta Axapta
    bash, sh, zsh Bash
    basic Basic
    bnf BNF
    brainfuck, bf Brainfuck
    cs, csharp C#
    cpp, c, cc, h, c++, h++, hpp C++
    cal C/AL
    cos, cls Cache Object Script
    cmake, cmake.in CMake
    coq Coq
    csp CSP
    css CSS
    capnproto, capnp Cap’n Proto
    clojure, clj Clojure
    coffeescript, coffee, cson, iced CoffeeScript
    crmsh, crm, pcmk Crmsh
    crystal, cr Crystal
    d D
    dns, zone, bind DNS Zone file
    dos, bat, cmd DOS
    dart Dart
    delphi, dpr, dfm, pas, pascal, freepascal, lazarus, lpr, lfm Delphi
    diff, patch Diff
    django, jinja Django
    dockerfile, docker Dockerfile
    dsconfig dsconfig
    dts DTS (Device Tree)
    dust, dst Dust
    ebnf EBNF
    elixir Elixir
    elm Elm
    erlang, erl Erlang
    excel, xls, xlsx Excel
    fsharp, fs F#
    fix FIX
    fortran, f90, f95 Fortran
    gcode, nc G-Code
    gams, gms Gams
    gauss, gss GAUSS
    gherkin Gherkin
    go, golang Go
    golo, gololang Golo
    gradle Gradle
    groovy Groovy
    xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist HTML, XML
    http, https HTTP
    haml Haml
    handlebars, hbs, html.hbs, html.handlebars Handlebars
    haskell, hs Haskell
    haxe, hx Haxe
    hy, hylang Hy
    ini Ini
    inform7, i7 Inform7
    irpf90 IRPF90
    json JSON
    java, jsp Java
    javascript, js, jsx JavaScript
    leaf Leaf
    lasso, ls, lassoscript Lasso
    less Less
    ldif LDIF
    lisp Lisp
    livecodeserver LiveCode Server
    livescript, ls LiveScript
    lua Lua
    makefile, mk, mak Makefile
    markdown, md, mkdown, mkd Markdown
    mathematica, mma Mathematica
    matlab Matlab
    maxima Maxima
    mel Maya Embedded Language
    mercury Mercury
    mizar Mizar
    mojolicious Mojolicious
    monkey Monkey
    moonscript, moon Moonscript
    n1ql N1QL
    nsis NSIS
    nginx, nginxconf Nginx
    nimrod, nim Nimrod
    nix Nix
    ocaml, ml OCaml
    objectivec, mm, objc, obj-c Objective C
    glsl OpenGL Shading Language
    openscad, scad OpenSCAD
    ruleslanguage Oracle Rules Language
    oxygene Oxygene
    pf, pf.conf PF
    php, php3, php4, php5, php6 PHP
    parser3 Parser3
    perl, pl, pm Perl
    pony Pony
    powershell, ps PowerShell
    processing Processing
    prolog Prolog
    protobuf Protocol Buffers
    puppet, pp Puppet
    python, py, gyp Python
    profile Python profiler results
    k, kdb Q
    qml QML
    r R
    rib RenderMan RIB
    rsl RenderMan RSL
    graph, instances Roboconf
    ruby, rb, gemspec, podspec, thor, irb Ruby
    rust, rs Rust
    scss SCSS
    sql SQL
    p21, step, stp STEP Part 21
    scala Scala
    scheme Scheme
    scilab, sci Scilab
    shell, console Shell
    smali Smali
    smalltalk, st Smalltalk
    stan Stan
    stata Stata
    stylus, styl Stylus
    subunit SubUnit
    swift Swift
    tap Test Anything Protocol
    tcl, tk Tcl
    tex TeX
    thrift Thrift
    tp TP
    twig, craftcms Twig
    typescript, ts TypeScript
    vbnet, vb VB.Net
    vbscript, vbs VBScript
    vhdl VHDL
    vala Vala
    verilog, v Verilog
    vim Vim Script
    x86asm x86 Assembly
    xl, tao XL
    xpath, xq XQuery
    zephir, zep Zephir

《延伸》

  1. highlight.js
  2. isagalaev/highlight.js: Javascript syntax highlighter

上一篇
[十分鐘學習] Chart.js - 圖表繪製
下一篇
[十分鐘學習] jquery-loading - 讀取中提示
系列文
30天學習30套前端技術(2018年)61

1 則留言

0
QQBoxy
iT邦新手 5 級 ‧ 2018-01-23 15:52:33

看到這篇讓我想起好久以前我是用這套

SyntaxHighlighter
https://github.com/syntaxhighlighter/syntaxhighlighter

mfhsueh iT邦新手 4 級‧ 2018-01-24 11:03:19 檢舉

這套也很紅 ?

QQBoxy iT邦新手 5 級‧ 2018-01-25 09:29:58 檢舉

網路上也蠻常見的

mfhsueh iT邦新手 4 級‧ 2018-01-25 17:47:06 檢舉

謝謝分享

我要留言

立即登入留言