iT邦幫忙

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

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

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

  • 分享至 

  • xImage
  •  

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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

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

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

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

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

這套也很紅 ?

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

網路上也蠻常見的

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

謝謝分享

我要留言

立即登入留言