我想创建一个可以与该\listings包一起使用的 HTML5 代码样式。
HTML5 文档由三种语言组成：CSS、HTML 和 JavaScript。这使得整个事情变得有点复杂，因为只能为三种语言定义一个关键字字段。
我熟悉了 NetBeans IDE 的风格（截屏）我已经走了很远。然而，还是存在一些问题……
错误 #1
该关键字canvas既作为 HTML 标签出现，又作为变量出现。我希望 HTML 标签为蓝色，但<script>块内的 JavaScript 变量不为蓝色。
错误 #2 因为我将结束 HTML 标签的斜杠设为蓝色，所以我的 JavaScript 文本中的正斜杠也变成了蓝色。
缺失功能 #3 CSS 代码中的标识符（#square、.box）不是绿色。
有人能帮我解决这些问题吗？我不想使用，因为我的文档中\minted已经有很多代码了。\listings
我还创建了一个最小的工作示例：
\documentclass{scrreprt}
\usepackage{color}
\definecolor{lightgray}{rgb}{0.95, 0.95, 0.95}
\definecolor{darkgray}{rgb}{0.4, 0.4, 0.4}
\definecolor{purple}{rgb}{0.65, 0.12, 0.82}
\definecolor{ocherCode}{rgb}{1, 0.5, 0} % #FF7F00 -> rgb(239, 169, 0)
\definecolor{blueCode}{rgb}{0, 0, 0.93} % #0000EE -> rgb(0, 0, 238)
\definecolor{greenCode}{rgb}{0, 0.6, 0} % #009900 -> rgb(0, 153, 0)
\usepackage{upquote}
\usepackage{listings}
\makeatletter
\lstdefinelanguage{HTML5}{
sensitive=true,
keywords={%
% JavaScript
typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break,
% HTML
html, title, meta, style, head, body, script, canvas,
% CSS
border:, transform:, -moz-transform:, transition-duration:, transition-property:,
transition-timing-function:
},
% http://texblog.org/tag/otherkeywords/
otherkeywords={<, >, \/},
ndkeywords={class, export, boolean, throw, implements, import, this},
comment=[l]{//},
% morecomment=[s][keywordstyle]{<}{>},
morecomment=[s]{/*}{*/},
morecomment=[s]{<!}{>},
morestring=[b]',
morestring=[b]",
alsoletter={-},
alsodigit={:}
}
\lstset{%
% Basic design
backgroundcolor=\color{lightgray},
basicstyle={\small\ttfamily},
frame=l,
% Line numbers
xleftmargin={0.75cm},
numbers=left,
stepnumber=1,
firstnumber=1,
numberfirstline=true,
% Code design
identifierstyle=\color{black},
keywordstyle=\color{blue}\bfseries,
ndkeywordstyle=\color{greenCode}\bfseries,
stringstyle=\color{ocherCode}\ttfamily,
commentstyle=\color{darkgray}\ttfamily,
% Code
language={HTML5},
tabsize=2,
showtabs=false,
showspaces=false,
showstringspaces=false,
extendedchars=true,
breaklines=true
}
\makeatother
\begin{document}
\begin{lstlisting}
<!DOCTYPE html>
<html>
<head>
<title>Canvas-Rotation</title>
<meta charset="UTF-8" />
<style>
#square {
border: 1px solid black;
transform: scale(10) rotate(3deg) translateX(0px);
-moz-transform: scale(10) rotate(3deg) translateX(0px);
}
.box {
transition-duration: 2s;
transition-property: transform;
transition-timing-function: linear;
}
</style>
</head>
<body>
<canvas id="square" width="200" height="200"></canvas>
<script>
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var image = new Image();
image.src = 'images/card.png';
image.width = 114;
image.height = 158;
image.onload = window.setInterval(function() {
rotation();
}, 1000/60);
</script>
</body>
</html>
\end{lstlisting}
\end{document}
我知道这个任务非常艰巨！但也许我们可以一起完成？
HTML5代码格式可以通用。
PS 我读到过有类似usekeywordsintag和 的命令tagstyle。但每次我想使用它们时都会收到错误：
! Package keyval Error: tagstyle undefined.
答案1
更新：我仍在改进代码风格。你可以在这里找到最新版本： https://www.writelatex.com/74567mmxwkw-我感谢所有进行测试的人:)
如果您想获得源代码的副本，您可以在这里获取： https://dl.dropboxusercontent.com/u/74217418/stackexchange/tex/html5_listings_sample.tex
经过多次反复尝试以及社区人士的帮助，我得到了一个非常有吸引力的结果。
截屏：
代码相当复杂，但确实有效。如果其他人可以尝试一下就好了。这样可以确保没有错误。不幸的是，所有 HTML 元素和属性以及 CSS 属性都必须手动输入。也许我们可以把所有这些物品列成一份清单？
与 W3C 规范一起应该是可能的。
以下是代码：
\documentclass{scrreprt}
\usepackage{color}
\definecolor{editorGray}{rgb}{0.95, 0.95, 0.95}
\definecolor{editorOcher}{rgb}{1, 0.5, 0} % #FF7F00 -> rgb(239, 169, 0)
\definecolor{editorGreen}{rgb}{0, 0.5, 0} % #007C00 -> rgb(0, 124, 0)
\usepackage{upquote}
\usepackage{listings}
\lstdefinelanguage{JavaScript}{
morekeywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
morecomment=[s]{/*}{*/},
morecomment=[l]//,
morestring=[b]",
morestring=[b]'
}
\lstdefinelanguage{HTML5}{
language=html,
sensitive=true,
alsoletter={<>=-},
otherkeywords={
% HTML tags
<html>, <head>, <title>, </title>, <meta, />, </head>, <body>,
<canvas, \/canvas>, <script>, </script>, </body>, </html>, <!, html>, <style>, </style>, ><
},
ndkeywords={
% General
=,
% HTML attributes
charset=, id=, width=, height=,
% CSS properties
border:, transform:, -moz-transform:, transition-duration:, transition-property:, transition-timing-function:
},
morecomment=[s]{<!--}{-->},
tag=[s]
}
\lstset{%
% Basic design
backgroundcolor=\color{editorGray},
basicstyle={\small\ttfamily},
frame=l,
% Line numbers
xleftmargin={0.75cm},
numbers=left,
stepnumber=1,
firstnumber=1,
numberfirstline=true,
% Code design
keywordstyle=\color{blue}\bfseries,
commentstyle=\color{darkgray}\ttfamily,
ndkeywordstyle=\color{editorGreen}\bfseries,
stringstyle=\color{editorOcher},
% Code
language=HTML5,
alsolanguage=JavaScript,
alsodigit={.:;},
tabsize=2,
showtabs=false,
showspaces=false,
showstringspaces=false,
extendedchars=true,
breaklines=true,
% Support for German umlauts
literate=%
{Ö}{{\"O}}1
{Ä}{{\"A}}1
{Ü}{{\"U}}1
{ß}{{\ss}}1
{ü}{{\"u}}1
{ä}{{\"a}}1
{ö}{{\"o}}1
}
\begin{document}
\begin{lstlisting}
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8" />
<style>
#square {
border: 1px solid black;
transform: scale(10) rotate(3deg) translateX(0px);
-moz-transform: scale(10) rotate(3deg) translateX(0px);
}
.box {
transition-duration: 2s;
transition-property: transform;
transition-timing-function: linear;
}
</style>
</head>
<body>
<canvas id="square" width="200" height="200"></canvas>
<script>
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var image = new Image();
image.src = 'images/card.png';
image.width = 114;
image.height = 158;
image.onload = window.setInterval(function() {
rotation();
}, 1000/60);
</script>
</body>
</html>
\end{lstlisting}
\end{document}
答案2
我也认为这是一个好主意！
正如你建议的那样，从文档中获取 html 标签和属性，我去了 MDN 页面，发现他们在一个 html 页面中拥有所有这些信息。基于另一个问题在您的帮助下，我已将相同的结构应用于所有标签，并且确实有效。我花了一段时间才意识到我声明每个标签的顺序很重要，但快速排序解决了这个问题。我也对属性重复了该过程，因此这两个应该是完整的。但是对于 CSS，我使用了几天前在其他地方找到的以前的工作，所以我不太确定。
以下是代码您在 writelatex.com 上发帖有了所有这些数据：
\documentclass{scrreprt}
\usepackage{color}
\definecolor{editorGray}{rgb}{0.95, 0.95, 0.95}
\definecolor{editorOcher}{rgb}{1, 0.5, 0} % #FF7F00 -> rgb(239, 169, 0)
\definecolor{editorGreen}{rgb}{0, 0.5, 0} % #007C00 -> rgb(0, 124, 0)
\usepackage{upquote}
\usepackage{listings}
\lstdefinelanguage{JavaScript}{
morekeywords={break, case, catch, continue, debugger, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with},
morecomment=[s]{/*}{*/},
morecomment=[l]//,
morestring=[b]",
morestring=[b]'
}
\lstdefinelanguage{CSS}{
keywords={accelerator,azimuth,background,background-attachment,
background-color,background-image,background-position,
background-position-x,background-position-y,background-repeat,
behavior,border,border-bottom,border-bottom-color,
border-bottom-style,border-bottom-width,border-collapse,
border-color,border-left,border-left-color,border-left-style,
border-left-width,border-right,border-right-color,
border-right-style,border-right-width,border-spacing,
border-style,border-top,border-top-color,border-top-style,
border-top-width,border-width,bottom,caption-side,clear,
clip,color,content,counter-increment,counter-reset,cue,
cue-after,cue-before,cursor,direction,display,elevation,
empty-cells,filter,float,font,font-family,font-size,
font-size-adjust,font-stretch,font-style,font-variant,
font-weight,height,ime-mode,include-source,
layer-background-color,layer-background-image,layout-flow,
layout-grid,layout-grid-char,layout-grid-char-spacing,
layout-grid-line,layout-grid-mode,layout-grid-type,left,
letter-spacing,line-break,line-height,list-style,
list-style-image,list-style-position,list-style-type,margin,
margin-bottom,margin-left,margin-right,margin-top,
marker-offset,marks,max-height,max-width,min-height,
min-width,-moz-binding,-moz-border-radius,
-moz-border-radius-topleft,-moz-border-radius-topright,
-moz-border-radius-bottomright,-moz-border-radius-bottomleft,
-moz-border-top-colors,-moz-border-right-colors,
-moz-border-bottom-colors,-moz-border-left-colors,-moz-opacity,
-moz-outline,-moz-outline-color,-moz-outline-style,
-moz-outline-width,-moz-user-focus,-moz-user-input,
-moz-user-modify,-moz-user-select,orphans,outline,
outline-color,outline-style,outline-width,overflow,
overflow-X,overflow-Y,padding,padding-bottom,padding-left,
padding-right,padding-top,page,page-break-after,
page-break-before,page-break-inside,pause,pause-after,
pause-before,pitch,pitch-range,play-during,position,quotes,
-replace,richness,right,ruby-align,ruby-overhang,
ruby-position,-set-link-source,size,speak,speak-header,
speak-numeral,speak-punctuation,speech-rate,stress,
scrollbar-arrow-color,scrollbar-base-color,
scrollbar-dark-shadow-color,scrollbar-face-color,
scrollbar-highlight-color,scrollbar-shadow-color,
scrollbar-3d-light-color,scrollbar-track-color,table-layout,
text-align,text-align-last,text-decoration,text-indent,
text-justify,text-overflow,text-shadow,text-transform,
text-autospace,text-kashida-space,text-underline-position,top,
unicode-bidi,-use-link-source,vertical-align,visibility,
voice-family,volume,white-space,widows,width,word-break,
word-spacing,word-wrap,writing-mode,z-index,zoom},
sensitive=true,
morecomment=[l]{//},
morecomment=[s]{/*}{*/},
morestring=[b]',
morestring=[b]",
alsoletter={:},
alsodigit={-}
}
\lstdefinelanguage{HTML5}{
language=html,
sensitive=true,
alsoletter={<>=-},
otherkeywords={
% HTML tags
<, </, >,
</a, <a, </a>,
</abbr, <abbr, </abbr>,
</address, <address, </address>,
</area, <area, </area>,
</area, <area, </area>,
</article, <article, </article>,
</aside, <aside, </aside>,
</audio, <audio, </audio>,
</audio, <audio, </audio>,
</b, <b, </b>,
</base, <base, </base>,
</bdi, <bdi, </bdi>,
</bdo, <bdo, </bdo>,
</blockquote, <blockquote, </blockquote>,
</body, <body, </body>,
</br, <br, </br>,
</button, <button, </button>,
</canvas, <canvas, </canvas>,
</caption, <caption, </caption>,
</cite, <cite, </cite>,
</code, <code, </code>,
</col, <col, </col>,
</colgroup, <colgroup, </colgroup>,
</data, <data, </data>,
</datalist, <datalist, </datalist>,
</dd, <dd, </dd>,
</del, <del, </del>,
</details, <details, </details>,
</dfn, <dfn, </dfn>,
</div, <div, </div>,
</dl, <dl, </dl>,
</dt, <dt, </dt>,
</em, <em, </em>,
</embed, <embed, </embed>,
</fieldset, <fieldset, </fieldset>,
</figcaption, <figcaption, </figcaption>,
</figure, <figure, </figure>,
</footer, <footer, </footer>,
</form, <form, </form>,
</h1, <h1, </h1>,
</h2, <h2, </h2>,
</h3, <h3, </h3>,
</h4, <h4, </h4>,
</h5, <h5, </h5>,
</h6, <h6, </h6>,
</head, <head, </head>,
</header, <header, </header>,
</hr, <hr, </hr>,
</html, <html, </html>,
</i, <i, </i>,
</iframe, <iframe, </iframe>,
</img, <img, </img>,
</input, <input, </input>,
</ins, <ins, </ins>,
</kbd, <kbd, </kbd>,
</keygen, <keygen, </keygen>,
</label, <label, </label>,
</legend, <legend, </legend>,
</li, <li, </li>,
</link, <link, </link>,
</main, <main, </main>,
</map, <map, </map>,
</mark, <mark, </mark>,
</math, <math, </math>,
</menu, <menu, </menu>,
</menuitem, <menuitem, </menuitem>,
</meta, <meta, </meta>,
</meter, <meter, </meter>,
</nav, <nav, </nav>,
</noscript, <noscript, </noscript>,
</object, <object, </object>,
</ol, <ol, </ol>,
</optgroup, <optgroup, </optgroup>,
</option, <option, </option>,
</output, <output, </output>,
</p, <p, </p>,
</param, <param, </param>,
</pre, <pre, </pre>,
</progress, <progress, </progress>,
</q, <q, </q>,
</rp, <rp, </rp>,
</rt, <rt, </rt>,
</ruby, <ruby, </ruby>,
</s, <s, </s>,
</samp, <samp, </samp>,
</script, <script, </script>,
</section, <section, </section>,
</select, <select, </select>,
</small, <small, </small>,
</source, <source, </source>,
</span, <span, </span>,
</strong, <strong, </strong>,
</style, <style, </style>,
</summary, <summary, </summary>,
</sup, <sup, </sup>,
</svg, <svg, </svg>,
</table, <table, </table>,
</tbody, <tbody, </tbody>,
</td, <td, </td>,
</template, <template, </template>,
</textarea, <textarea, </textarea>,
</tfoot, <tfoot, </tfoot>,
</th, <th, </th>,
</thead, <thead, </thead>,
</time, <time, </time>,
</title, <title, </title>,
</tr, <tr, </tr>,
</track, <track, </track>,
</u, <u, </u>,
</ul, <ul, </ul>,
</var, <var, </var>,
</video, <video, </video>,
</wbr, <wbr, </wbr>,
/>, <!
},
ndkeywords={
% General
=,
% HTML attributes
accept=, accept-charset=, accesskey=, action=, align=, alt=, async=, autocomplete=, autofocus=, autoplay=, autosave=, bgcolor=, border=, buffered=, challenge=, charset=, checked=, cite=, class=, code=, codebase=, color=, cols=, colspan=, content=, contenteditable=, contextmenu=, controls=, coords=, data=, datetime=, default=, defer=, dir=, dirname=, disabled=, download=, draggable=, dropzone=, enctype=, for=, form=, formaction=, headers=, height=, hidden=, high=, href=, hreflang=, http-equiv=, icon=, id=, ismap=, itemprop=, keytype=, kind=, label=, lang=, language=, list=, loop=, low=, manifest=, max=, maxlength=, media=, method=, min=, multiple=, name=, novalidate=, open=, optimum=, pattern=, ping=, placeholder=, poster=, preload=, pubdate=, radiogroup=, readonly=, rel=, required=, reversed=, rows=, rowspan=, sandbox=, scope=, scoped=, seamless=, selected=, shape=, size=, sizes=, span=, spellcheck=, src=, srcdoc=, srclang=, start=, step=, style=, summary=, tabindex=, target=, title=, type=, usemap=, value=, width=, wrap=,
% CSS properties
accelerator:,azimuth:,background:,background-attachment:,
background-color:,background-image:,background-position:,
background-position-x:,background-position-y:,background-repeat:,
behavior:,border:,border-bottom:,border-bottom-color:,
border-bottom-style:,border-bottom-width:,border-collapse:,
border-color:,border-left:,border-left-color:,border-left-style:,
border-left-width:,border-right:,border-right-color:,
border-right-style:,border-right-width:,border-spacing:,
border-style:,border-top:,border-top-color:,border-top-style:,
border-top-width:,border-width:,bottom:,caption-side:,clear:,
clip:,color:,content:,counter-increment:,counter-reset:,cue:,
cue-after:,cue-before:,cursor:,direction:,display:,elevation:,
empty-cells:,filter:,float:,font:,font-family:,font-size:,
font-size-adjust:,font-stretch:,font-style:,font-variant:,
font-weight:,height:,ime-mode:,include-source:,
layer-background-color:,layer-background-image:,layout-flow:,
layout-grid:,layout-grid-char:,layout-grid-char-spacing:,
layout-grid-line:,layout-grid-mode:,layout-grid-type:,left:,
letter-spacing:,line-break:,line-height:,list-style:,
list-style-image:,list-style-position:,list-style-type:,margin:,
margin-bottom:,margin-left:,margin-right:,margin-top:,
marker-offset:,marks:,max-height:,max-width:,min-height:,
min-width:,transition-duration:,transition-property:,
transition-timing-function:,transform:,
-moz-transform:,-moz-binding:,-moz-border-radius:,
-moz-border-radius-topleft:,-moz-border-radius-topright:,
-moz-border-radius-bottomright:,-moz-border-radius-bottomleft:,
-moz-border-top-colors:,-moz-border-right-colors:,
-moz-border-bottom-colors:,-moz-border-left-colors:,-moz-opacity:,
-moz-outline:,-moz-outline-color:,-moz-outline-style:,
-moz-outline-width:,-moz-user-focus:,-moz-user-input:,
-moz-user-modify:,-moz-user-select:,orphans:,outline:,
outline-color:,outline-style:,outline-width:,overflow:,
overflow-X:,overflow-Y:,padding:,padding-bottom:,padding-left:,
padding-right:,padding-top:,page:,page-break-after:,
page-break-before:,page-break-inside:,pause:,pause-after:,
pause-before:,pitch:,pitch-range:,play-during:,position:,quotes:,
-replace:,richness:,right:,ruby-align:,ruby-overhang:,
ruby-position:,-set-link-source:,size:,speak:,speak-header:,
speak-numeral:,speak-punctuation:,speech-rate:,stress:,
scrollbar-arrow-color:,scrollbar-base-color:,
scrollbar-dark-shadow-color:,scrollbar-face-color:,
scrollbar-highlight-color:,scrollbar-shadow-color:,
scrollbar-3d-light-color:,scrollbar-track-color:,table-layout:,
text-align:,text-align-last:,text-decoration:,text-indent:,
text-justify:,text-overflow:,text-shadow:,text-transform:,
text-autospace:,text-kashida-space:,text-underline-position:,top:,
unicode-bidi:,-use-link-source:,vertical-align:,visibility:,
voice-family:,volume:,white-space:,widows:,width:,word-break:,
word-spacing:,word-wrap:,writing-mode:,z-index:,zoom:
},
morecomment=[s]{<!--}{-->},
tag=[s]
}
\lstset{%
% Basic design
backgroundcolor=\color{editorGray},
basicstyle={\small\ttfamily},
frame=l,
% Line numbers
xleftmargin={0.75cm},
numbers=left,
stepnumber=1,
firstnumber=1,
numberfirstline=true,
% Code design
keywordstyle=\color{blue}\bfseries,
commentstyle=\color{darkgray}\ttfamily,
ndkeywordstyle=\color{editorGreen}\bfseries,
stringstyle=\color{editorOcher},
% Code
language=HTML5,
alsodigit={.:;},
tabsize=2,
showtabs=false,
showspaces=false,
showstringspaces=false,
extendedchars=true,
breaklines=true,
}
\begin{document}
\begin{lstlisting}
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8" />
<style>
#square {
border: 1px solid black;
transform: scale(10) rotate(3deg) translateX(0px);
-moz-transform: scale(10) rotate(3deg) translateX(0px);
}
.box {
transition-duration: 2s;
transition-property: transform;
transition-timing-function: linear;
}
</style>
</head>
<body>
<canvas id="square" width="200" height="200"></canvas>
<script>
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var image = new Image();
image.src = 'images/card.png';
image.width = 114;
image.height = 158;
image.onload = window.setInterval(function() {
rotation();
}, 1000/60);
</script>
</body>
</html>
\end{lstlisting}
\end{document}
