<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<div id="container">
  <div id="header"></div>
  <div id="main">
    <div id="code">
      <div id="code2">
        <strong>Source code:</strong><br />
        <textarea id="codeArea" name="code" rows="10" cols="40"></textarea>
      </div>
    </div>
    <div id="html">
      <div id="html2">
        <strong>HTML:</strong><br />
        <textarea id="htmlOut" name="html" rows="10" cols="40" readonly="readonly" onClick="javascript:this.focus();this.select();"></textarea>
      </div>
    </div>
  </div>
  <div id="options">
    <p>Language:
      <select id="lexer">
        <option value="abap">ABAP</option>
        <option value="as">ActionScript</option>
        <option value="as3">ActionScript 3</option>
        <option value="ada">Ada</option>
        <option value="antlr">ANTLR</option>
        <option value="antlr-as">ANTLR With ActionScript Target</option>
        <option value="antlr-csharp">ANTLR With C# Target</option>
        <option value="antlr-cpp">ANTLR With CPP Target</option>
        <option value="antlr-java">ANTLR With Java Target</option>
        <option value="antlr-objc">ANTLR With ObjectiveC Target</option>
        <option value="antlr-perl">ANTLR With Perl Target</option>
        <option value="antlr-python">ANTLR With Python Target</option>
        <option value="antlr-ruby">ANTLR With Ruby Target</option>
        <option value="apacheconf">ApacheConf</option>
        <option value="applescript">AppleScript</option>
        <option value="aspectj">AspectJ</option>
        <option value="aspx-cs">aspx-cs</option>
        <option value="aspx-vb">aspx-vb</option>
        <option value="asy">Asymptote</option>
        <option value="ahk">autohotkey</option>
        <option value="autoit">AutoIt</option>
        <option value="awk">Awk</option>
        <option value="basemake">Base Makefile</option>
        <option value="bash">Bash</option>
        <option value="console">Bash Session</option>
        <option value="bat">Batchfile</option>
        <option value="bbcode">BBCode</option>
        <option value="befunge">Befunge</option>
        <option value="blitzmax">BlitzMax</option>
        <option value="boo">Boo</option>
        <option value="brainfuck">Brainfuck</option>
        <option value="bro">Bro</option>
        <option value="bugs">BUGS</option>
        <option value="c">C</option>
        <option value="csharp">C#</option>
        <option value="cpp">C++</option>
        <option value="c-objdump">c-objdump</option>
        <option value="ca65">ca65</option>
        <option value="cbmbas">CBM BASIC V2</option>
        <option value="ceylon">Ceylon</option>
        <option value="cfengine3">CFEngine3</option>
        <option value="cfs">cfstatement</option>
        <option value="cheetah">Cheetah</option>
        <option value="clojure">Clojure</option>
        <option value="cmake">CMake</option>
        <option value="cobol">COBOL</option>
        <option value="cobolfree">COBOLFree</option>
        <option value="coffee-script">CoffeeScript</option>
        <option value="cfm">Coldfusion HTML</option>
        <option value="common-lisp">Common Lisp</option>
        <option value="coq">Coq</option>
        <option value="cpp-objdump">cpp-objdump</option>
        <option value="croc">Croc</option>
        <option value="css">CSS</option>
        <option value="css+django">CSS+Django/Jinja</option>
        <option value="css+genshitext">CSS+Genshi Text</option>
        <option value="css+lasso">CSS+Lasso</option>
        <option value="css+mako">CSS+Mako</option>
        <option value="css+myghty">CSS+Myghty</option>
        <option value="css+php">CSS+PHP</option>
        <option value="css+erb">CSS+Ruby</option>
        <option value="css+smarty">CSS+Smarty</option>
        <option value="cuda">CUDA</option>
        <option value="cython">Cython</option>
        <option value="d">D</option>
        <option value="d-objdump">d-objdump</option>
        <option value="dpatch">Darcs Patch</option>
        <option value="dart">Dart</option>
        <option value="control">Debian Control file</option>
        <option value="sourceslist">Debian Sourcelist</option>
        <option value="delphi">Delphi</option>
        <option value="dg">dg</option>
        <option value="diff">Diff</option>
        <option value="django">Django/Jinja</option>
        <option value="dtd">DTD</option>
        <option value="duel">Duel</option>
        <option value="dylan">Dylan</option>
        <option value="dylan-console">Dylan session</option>
        <option value="dylan-lid">DylanLID</option>
        <option value="ec">eC</option>
        <option value="ecl">ECL</option>
        <option value="elixir">Elixir</option>
        <option value="iex">Elixir iex session</option>
        <option value="ragel-em">Embedded Ragel</option>
        <option value="erb">ERB</option>
        <option value="erlang">Erlang</option>
        <option value="erl">Erlang erl session</option>
        <option value="evoque">Evoque</option>
        <option value="factor">Factor</option>
        <option value="fancy">Fancy</option>
        <option value="fan">Fantom</option>
        <option value="felix">Felix</option>
        <option value="fortran">Fortran</option>
        <option value="Clipper">FoxPro</option>
        <option value="fsharp">FSharp</option>
        <option value="gas">GAS</option>
        <option value="genshi">Genshi</option>
        <option value="genshitext">Genshi Text</option>
        <option value="pot">Gettext Catalog</option>
        <option value="Cucumber">Gherkin</option>
        <option value="glsl">GLSL</option>
        <option value="gnuplot">Gnuplot</option>
        <option value="go">Go</option>
        <option value="gooddata-cl">GoodData-CL</option>
        <option value="gosu">Gosu</option>
        <option value="gst">Gosu Template</option>
        <option value="groff">Groff</option>
        <option value="groovy">Groovy</option>
        <option value="haml">Haml</option>
        <option value="haskell">Haskell</option>
        <option value="hx">haXe</option>
        <option value="html">HTML</option>
        <option value="html+cheetah">HTML+Cheetah</option>
        <option value="html+django">HTML+Django/Jinja</option>
        <option value="html+evoque">HTML+Evoque</option>
        <option value="html+genshi">HTML+Genshi</option>
        <option value="html+lasso">HTML+Lasso</option>
        <option value="html+mako">HTML+Mako</option>
        <option value="html+myghty">HTML+Myghty</option>
        <option value="html+php">HTML+PHP</option>
        <option value="html+smarty">HTML+Smarty</option>
        <option value="html+velocity">HTML+Velocity</option>
        <option value="http">HTTP</option>
        <option value="haxeml">Hxml</option>
        <option value="hybris">Hybris</option>
        <option value="idl">IDL</option>
        <option value="ini">INI</option>
        <option value="io">Io</option>
        <option value="ioke">Ioke</option>
        <option value="irc">IRC logs</option>
        <option value="jade">Jade</option>
        <option value="jags">JAGS</option>
        <option value="java">Java</option>
        <option value="jsp">Java Server Page</option>
        <option selected="selected" value="js">JavaScript</option>
        <option value="js+cheetah">JavaScript+Cheetah</option>
        <option value="js+django">JavaScript+Django/Jinja</option>
        <option value="js+genshitext">JavaScript+Genshi Text</option>
        <option value="js+lasso">JavaScript+Lasso</option>
        <option value="js+mako">JavaScript+Mako</option>
        <option value="js+myghty">JavaScript+Myghty</option>
        <option value="js+php">JavaScript+PHP</option>
        <option value="js+erb">JavaScript+Ruby</option>
        <option value="js+smarty">JavaScript+Smarty</option>
        <option value="json">JSON</option>
        <option value="julia">Julia</option>
        <option value="jlcon">Julia console</option>
        <option value="kconfig">Kconfig</option>
        <option value="koka">Koka</option>
        <option value="kotlin">Kotlin</option>
        <option value="lasso">Lasso</option>
        <option value="lighty">Lighttpd configuration file</option>
        <option value="lhs">Literate Haskell</option>
        <option value="live-script">LiveScript</option>
        <option value="llvm">LLVM</option>
        <option value="logos">Logos</option>
        <option value="logtalk">Logtalk</option>
        <option value="lua">Lua</option>
        <option value="make">Makefile</option>
        <option value="mako">Mako</option>
        <option value="maql">MAQL</option>
        <option value="mason">Mason</option>
        <option value="matlab">Matlab</option>
        <option value="matlabsession">Matlab session</option>
        <option value="minid">MiniD</option>
        <option value="modelica">Modelica</option>
        <option value="modula2">Modula-2</option>
        <option value="trac-wiki">MoinMoin/Trac Wiki markup</option>
        <option value="monkey">Monkey</option>
        <option value="moocode">MOOCode</option>
        <option value="moon">MoonScript</option>
        <option value="mscgen">Mscgen</option>
        <option value="mupad">MuPAD</option>
        <option value="mxml">MXML</option>
        <option value="myghty">Myghty</option>
        <option value="mysql">MySQL</option>
        <option value="nasm">NASM</option>
        <option value="nemerle">Nemerle</option>
        <option value="newlisp">NewLisp</option>
        <option value="newspeak">Newspeak</option>
        <option value="nginx">Nginx configuration file</option>
        <option value="nimrod">Nimrod</option>
        <option value="nsis">NSIS</option>
        <option value="numpy">NumPy</option>
        <option value="objdump">objdump</option>
        <option value="objective-c">Objective-C</option>
        <option value="objective-c++">Objective-C++</option>
        <option value="objective-j">Objective-J</option>
        <option value="ocaml">OCaml</option>
        <option value="octave">Octave</option>
        <option value="ooc">Ooc</option>
        <option value="opa">Opa</option>
        <option value="openedge">OpenEdge ABL</option>
        <option value="perl">Perl</option>
        <option value="php">PHP</option>
        <option value="plpgsql">PL/pgSQL</option>
        <option value="psql">PostgreSQL console (psql)</option>
        <option value="postgresql">PostgreSQL SQL dialect</option>
        <option value="postscript">PostScript</option>
        <option value="pov">POVRay</option>
        <option value="powershell">PowerShell</option>
        <option value="prolog">Prolog</option>
        <option value="properties">Properties</option>
        <option value="protobuf">Protocol Buffer</option>
        <option value="puppet">Puppet</option>
        <option value="pypylog">PyPy Log</option>
        <option value="python">Python</option>
        <option value="python3">Python 3</option>
        <option value="py3tb">Python 3.0 Traceback</option>
        <option value="pycon">Python console session</option>
        <option value="pytb">Python Traceback</option>
        <option value="qml">QML</option>
        <option value="racket">Racket</option>
        <option value="ragel">Ragel</option>
        <option value="ragel-c">Ragel in C Host</option>
        <option value="ragel-cpp">Ragel in CPP Host</option>
        <option value="ragel-d">Ragel in D Host</option>
        <option value="ragel-java">Ragel in Java Host</option>
        <option value="ragel-objc">Ragel in Objective C Host</option>
        <option value="ragel-ruby">Ragel in Ruby Host</option>
        <option value="raw">Raw token data</option>
        <option value="rconsole">RConsole</option>
        <option value="rd">Rd</option>
        <option value="rebol">REBOL</option>
        <option value="redcode">Redcode</option>
        <option value="registry">reg</option>
        <option value="rst">reStructuredText</option>
        <option value="rhtml">RHTML</option>
        <option value="RobotFramework">RobotFramework</option>
        <option value="spec">RPMSpec</option>
        <option value="rb">Ruby</option>
        <option value="rbcon">Ruby irb session</option>
        <option value="rust">Rust</option>
        <option value="splus">S</option>
        <option value="sass">Sass</option>
        <option value="scala">Scala</option>
        <option value="ssp">Scalate Server Page</option>
        <option value="scaml">Scaml</option>
        <option value="scheme">Scheme</option>
        <option value="scilab">Scilab</option>
        <option value="scss">SCSS</option>
        <option value="shell-session">Shell Session</option>
        <option value="smali">Smali</option>
        <option value="smalltalk">Smalltalk</option>
        <option value="smarty">Smarty</option>
        <option value="snobol">Snobol</option>
        <option value="sp">SourcePawn</option>
        <option value="sql">SQL</option>
        <option value="sqlite3">sqlite3con</option>
        <option value="squidconf">SquidConf</option>
        <option value="stan">Stan</option>
        <option value="sml">Standard ML</option>
        <option value="systemverilog">systemverilog</option>
        <option value="tcl">Tcl</option>
        <option value="tcsh">Tcsh</option>
        <option value="tea">Tea</option>
        <option value="tex">TeX</option>
        <option value="text">Text only</option>
        <option value="treetop">Treetop</option>
        <option value="ts">TypeScript</option>
        <option value="urbiscript">UrbiScript</option>
        <option value="vala">Vala</option>
        <option value="vb.net">VB.net</option>
        <option value="velocity">Velocity</option>
        <option value="verilog">verilog</option>
        <option value="vgl">VGL</option>
        <option value="vhdl">vhdl</option>
        <option value="vim">VimL</option>
        <option value="xml">XML</option>
        <option value="xml+cheetah">XML+Cheetah</option>
        <option value="xml+django">XML+Django/Jinja</option>
        <option value="xml+evoque">XML+Evoque</option>
        <option value="xml+lasso">XML+Lasso</option>
        <option value="xml+mako">XML+Mako</option>
        <option value="xml+myghty">XML+Myghty</option>
        <option value="xml+php">XML+PHP</option>
        <option value="xml+erb">XML+Ruby</option>
        <option value="xml+smarty">XML+Smarty</option>
        <option value="xml+velocity">XML+Velocity</option>
        <option value="xquery">XQuery</option>
        <option value="xslt">XSLT</option>
        <option value="xtend">Xtend</option>
        <option value="yaml">YAML</option>
      </select>
      Style:
      <select id="style">
        <option value="autumn">autumn</option>
        <option value="borland">borland</option>
        <option value="bw">bw</option>
        <option selected="selected" value="colorful">colorful</option>
        <option value="default">default</option>
        <option value="emacs">emacs</option>
        <option value="friendly">friendly</option>
        <option value="fruity">fruity</option>
        <option value="manni">manni</option>
        <option value="monokai">monokai</option>
        <option value="murphy">murphy</option>
        <option value="native">native</option>
        <option value="pastie">pastie</option>
        <option value="perldoc">perldoc</option>
        <option value="rrt">rrt</option>
        <option value="tango">tango</option>
        <option value="trac">trac</option>
        <option value="vim">vim</option>
        <option value="vs">vs</option>
      </select>
      <input name="linenos" id="linenos" type="checkbox" value="1" checked="checked" /><label for="linenos">Line numbers</label>
      <br />
      CSS:
      <input type="text" id="divstyles" name="divstyles" value="border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;" />
      <input name="Highlight" id="Highlight" onclick="Highlight();" type="button" value="Highlight!" />
    </p>
  </div>

  <div id="preview">
    <p>
      <strong>Preview:</strong>
    <div id="viewOut"></div>
    </p>
  </div>
  <div>
    <p>擷取從<input id="n1" type="number" value="1" min="1" max="100" step="1">
      行，到<input id="n2" type="number" value="5" min="1" max="100" step="1">行
      <input name="toImg" id="toImg" onclick="split_to_html_toImg();" type="button" value="getImg!" />
    </p>
  </div>
  <div id="div2"></div>
  <div id="div1"></div>
  
</div>

 body, html {
        margin:0;
        padding:0;
        color:#333;
        background:#fff;
        font-family:Verdana,Helvetica,Arial,sans-serif;
      }
      input {
          margin:.5em 0;
      }
      #container {
          width:750px;
          margin:1em auto;
      }
      #container > div {
          margin:auto 1em;
      }
      #code {
          float:left;
          width:50%;
      }
      #html {
          float:right;
          width:50%;
      }
      #code2 {
          margin-right:1em;
      }
      #html2 {
          margin-left:1em;
      }
      #main textarea {
          width:100%;
          height:10em;
      }
      #html2 textarea {
          float:right;
      }
      #options {
          clear:both;
      }
      #divstyles {
          width:50%;
      }
      #preview {
          padding-bottom: 3em;
      }
      #footer {
          border-top:1px dotted #000;
      }
      #footer p {
          text-align:center;
          font-size:75%;
      }

var lexer = "";
var style = "";
var code = "";
var linenos = "";
var divstyles = "";
var m1 = document.getElementById("htmlOut");
var v1 = document.getElementById("viewOut");
//
var k1;
var k2;
//
var n1 = "";
var n2 = "";

function Highlight() {
  $("#options #lexer option:selected").each(function () {
    //console.log($(this).html());
    //console.log($(this).val());
    lexer = "";
    lexer = $(this).val();
    console.log(lexer);
  });
  $("#options #style option:selected").each(function () {
    //console.log($(this).html());
    //console.log($(this).val());
    style = "";
    style = $(this).val();
    //console.log(style);
  });
  code = "";
  code = $("#codeArea").val();
  //console.log(code);
  linenos = "";
  if ($("#linenos").is(":checked")) {
    //console.log("checked");
    linenos = "1";
  }
  divstyles = "";
  divstyles = $("#divstyles").val();
  //console.log(divstyles);

  $.ajax({
    url:
      "https://script.google.com/macros/s/AKfycbzWnUfrDjpmaqer2OIcF1u6DVgoU1I-VOkdQm-FogcjaWWe-8zDYg6cqVpZMUP-HHUp/exec", //hilite_me_API
    method: "POST",
    data: {
      code: code,
      lexer: lexer,
      style: style,
      linenos: "1"
    },
    success: function (e) {
      //console.log(e);
      m1.value = e;
      v1.innerHTML = e;
      //console.log('m1');
      //console.log(m1);
      k1 = $("#preview div table tr td:eq(0)").html().split("\n");
      //console.log(k1.length);
      //console.log(k1[21]);     
      k2 = $("#preview div table tr td:eq(1)").html().split("\n");
      $("#n2").attr('max', k2.length-1);
      $("#n2").attr('value', k2.length-1);
    }
  });
  //
}

async function toImg(e, n1, n2) {
  //toImg
  //console.log("m1");
  //console.log(m1.value);
  var d1 = document.getElementById("div1");
  var d2 = document.getElementById("div2");
  d1.style.visibility = "visible";
  d1.innerHTML = e;
  var config = { quality: 0.95 ,bgcolor: '#ffffff'};
  var dataUri = await domtoimage.toJpeg(d1, config).then((dataUrl) => dataUrl);
  //console.log(dataUri);
  //取得圖片尺寸
  var x;
  var y;
  const img = new Image();
  img.onload = function () {
    x = this.width;
    y = this.height;
    //console.log(this.width + "x" + this.height);
  };
  img.src = dataUri;
  // 開新視窗 顯示圖片
  imgSrc = dataUri;
  myWindow = window.open("", "", "width=" + x + ",height=" + y);
  myWindow.document.write(
    '<a href="' +
      dataUri +
      '" download="' +
      n1 +
      "-" +
      n2 +
      ".jpg" +
      '"><img src="' +
      imgSrc +
      '" title="' +
      n1 +
      "-" +
      n2 +
      '" /></a>'
  );
  d2.innerHTML = '<a href="' +
      dataUri +
      '" download="' +
      n1 +
      "-" +
      n2 +
      ".jpg" +
      '"><img src="' +
      imgSrc +
      '" title="' +
      n1 +
      "-" +
      n2 +
      '" /></a>';
  myWindow.focus();
  //隱藏div1
  d1.style.visibility = "hidden";
}
//
function split_to_html(a, b) {
  var a = a - 1;
  var b = b - 1;
  if (typeof b == "undefined") {
    if (a == 0) {
      var o1 =
        "<table><tr><td>" + k1[a] + "</td><td>" + k2[a] + "</td></tr></table>";
    } else {
      var o1 =
        '<table><tr><td><pre style="margin: 0; line-height: 125%">' +
        k1[a] +
        '</pre></td><td><pre style="margin: 0; line-height: 125%">' +
        k2[a] +
        "</pre></td></tr></table>";
    }
    //console.log(o1);
    //toImg(o1);
    return o1;
  } else {
    //console.log('o2');
    var m1 = "";
    var m2 = "";
    if (a == 0) {
      for (var i = a; i <= b; i++) {
        m1 = m1 + k1[i] + "\n";
        m2 = m2 + k2[i] + "\n";
      }
      m = m1 + "</td><td>" + m2;
      o2 = "<table><tr><td>" + m + "</td></tr></table>";
      //console.log(o2);
    } else {
      for (var i = a; i <= b; i++) {
        m1 = m1 + k1[i] + "\n";
        m2 = m2 + k2[i] + "\n";
      }
      m = m1 + '</pre></td><td><pre style="margin: 0; line-height: 125%">' + m2;
      o2 =
        '<table><tr><td><pre style="margin: 0; line-height: 125%">' +
        m +
        "</pre></td></tr></table>";
      //console.log(o2);
    }
    //toImg(o2);
    return o2;
  }
}
//
function split_to_html_toImg() {
  n1 = "";
  n1 = parseInt($("#n1").val());
  n2 = "";
  n2 = parseInt($("#n2").val());
  console.log(n1);
  console.log(n2);
  //
  if (n1 > n2) {
    return false;
  }
  //
  var h1 = split_to_html(n1, n2);
  toImg(h1, n1, n2);
}