☰

第二部分

tag-icon • tag-icon listings html coding tags
第二部分

问题：

>MWE 中的 HTML 标签符号与符号颜色不同。<希望两者颜色相同。

最小工作示例：

\documentclass{scrreprt}
\makeatletter
\usepackage{color}
\definecolor{editorLightGray}{cmyk}{0.05, 0.05, 0.05, 0.1}
\definecolor{editorGray}{cmyk}{0.6, 0.55, 0.55, 0.2}
\definecolor{editorPurple}{cmyk}{0.5, 1, 0, 0}
\definecolor{editorWhite}{cmyk}{0, 0, 0, 0}
\definecolor{editorBlack}{cmyk}{1, 1, 1, 1}
\definecolor{editorOrange}{cmyk}{0, 0.8, 1, 0}
\definecolor{editorBlue}{cmyk}{1, 0.6, 0, 0}
\definecolor{editorPink}{cmyk}{0, 1, 0, 0}
\usepackage{upquote}
\usepackage{listings}
% CSS
\lstdefinelanguage{CSS}{
  keywords={color,background-image:,margin,padding,font,weight,display,position,top,left,right,bottom,list,style,border,size,white,space,min,width, transition:, transform:, transition-property, transition-duration, transition-timing-function}, 
  sensitive=true,
  morecomment=[l]{//},
  morecomment=[s]{/*}{*/},
  morestring=[b]',
  morestring=[b]",
  alsoletter={:},
  alsodigit={-}
}

% JavaScript
\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={<>=-+},   
  morecomment=[s]{<!-}{-->},
  tag=[s],
  otherkeywords={
  % General
  % >,
  % Standard tags
    <!DOCTYPE,
  </html, <html, <head, <title, </title, <style, </style, <link, </head, <meta, />,
    % body
    </body, <body,
    % Divs
    </div, <div, </div>, 
    % Paragraphs
    </p, <p, </p>,
    % scripts
    </script, <script,
  % More tags...
  <canvas, /canvas>, <svg, <rect, <animateTransform, </rect>, </svg>, <video, <source, <iframe, </iframe>, </video>, <image, </image>
  },
  ndkeywords={=,
  % General
  +=,
  % HTML attributes
   charset=, src=, id=, width=, height=, style=, type=, rel=, href=,
  % SVG attributes
  fill=, attributeName=, begin=, dur=, from=, to=, poster=, controls=, x=, y=, repeatCount=, xlink:href=,
  % CSS properties
  margin:, padding:, background-image:, border:, top:, left:, position:, width:, height:,
    % CSS3 properties
  transform:, -moz-transform:, -webkit-transform:,
  animation:, -webkit-animation:,
  transition:,  transition-duration:, transition-property:, transition-timing-function:,
  },
}

\lstdefinelanguage{PHP}{
        morestring=[s]{'}{'},
        morestring=[b]",
        sensitive=true,
        keywords=[1]{require_once, try, new, catch, die, echo},
        keywords=[2]{setAttribute, getMessage, PDO, sprintf},
        keywords=[3]{PDOException, PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION, php},
        keywords=[4]{athletics}
}

\lstset{%
  % General design
  backgroundcolor=\color{white},
  basicstyle={\small\ttfamily},   
  frame=l,
  % line-numbers
  xleftmargin={14pt},
  numbers=left,
  stepnumber=1,
  firstnumber=1,
  numberfirstline=true, 
  % Code design
  identifierstyle=\color{editorOrange},
  keywordstyle=[1]\color{editorPink},
  keywordstyle=[2]\color{editorBlue},
  keywordstyle=[3]\color{editorBlack},
  keywordstyle=[4]\color{editorBlue},
  commentstyle=\color{editorGray},
  stringstyle=\color{editorPurple},
  % Code
  language=HTML5,
  alsolanguage=CSS,
  alsolanguage=JavaScript,
  alsolanguage=PHP,
  alsodigit={.:},  
  tabsize=2,
  showtabs=false,
  showspaces=false,
  showstringspaces=false,
  extendedchars=true,
  breaklines=false,
  % German umlauts
  literate=%
  {Ö}{{\"O}}1
  {Ä}{{\"A}}1
  {Ü}{{\"U}}1
  {ß}{{\ss}}1
  {ü}{{\"u}}1
  {ä}{{\"a}}1
  {ö}{{\"o}}1
}

\makeatother
\begin{document}
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <head>
    <title>Listings Style Test</title>
    <meta charset="UTF-8">
    <style>
      /* CSS Test */
      * {
        padding: 0;
        border: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- Paragraphs are fine -->
    <div id="box">          
            <p>
              Hello World
            </p>
      <p>Hello World</p>
      <p id="test">Hello World</p>
            <p></p>
    </div>
    <div>Test</div>
    <!-- HTML script is not consistent -->
    <script src="js/benchmark.js"></script>
    <script>
      function createSquare(x, y) {
        // This is a comment.
        var square = document.createElement('div');
        square.style.width = square.style.height = '50px';
        square.style.backgroundColor = 'blue';

        /*
         * This is another comment.
         */
        square.style.position = 'absolute';
        square.style.left = x + 'px'; 
        square.style.top = y + 'px';

        var body = document.getElementsByTagName('body')[0];
        body.appendChild(square);
      };

      // Please take a look at +=
      window.addEventListener('mousedown', function(event) {
        // German umlaut test: Berührungspunkt ermitteln
        var x = event.touches[0].pageX;
        var y = event.touches[0].pageY;
        var lookAtThis += 1;
      });
    </script>
  </body>
</html>
\end{lstlisting}
\end{document}

期望的结果：

注释的符号>应为灰色，而>HTML 标签的符号应与<符号颜色相同。

答案1

我的第一个尝试是这样的morekeywords={>, etc}。但是>评论末尾的每个都是粉红色的。我无法通过例如覆盖其颜色。moewkeywords=[9]{-->}然后我发现这可能是因为<和>在这种情况下是特殊的。

更确切地说，房源实际上通过以下方式处理标签：当您说时language=html，从<到的所有内容>都由设置样式tagstyle=。所以我在示例中写道。注意和部分tagstyle=\color{editorBlue}的颜色。（像's 和这样的关键字不是蓝色，因为会覆盖它。）=pigdivp'skeywordstlye=

\lstset{
  language=html,
  tagstyle=\color{editorBlue},
  basicstyle={\small\ttfamily},
  identifierstyle=\color{editorOrange},
  keywordstyle=\color{editorPink},
  commentstyle=\color{editorGray},
  stringstyle=\color{editorPurple}
}
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <body>
    <!-- Paragraphs are fine -->
    <div id="box">
      <p>Hello World</p>
      <p id="test">Hello World</p>
            <pig weight=120kg></pig>
    </div>
    <div>Test</div>
  </body>
</html>
\end{lstlisting}

第二部分

您可能还会注意到<!-- -->颜色不正确。事情是这样的：

注释声明以 开头<!，后跟零个或多个注释，后跟>。
注释以 开头和结尾--，且不包含任何--。

从技术上来说房源这样做是正确的，尽管这不是我们想要的。要将注释从 着色<!到>，请使用morecomment=：

\lstdefinelanguage{HTML5}{
  language=html,
  tagstyle=\color{editorBlue},
  markfirstintag,
  morecomment=[s]{<!-}{-->},
}
\lstset{
  language=HTML5
}
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <body>
    <!-- Paragraphs are fine -->
    <div id="box">
      <p>Hello World</p>
      <p id="test">Hello World</p>
            <pig weight=120kg></pig>
    </div>
    <div>Test</div>
  </body>
</html>
\end{lstlisting}

第三部分

您可以通过修改\lst@BeginTag和来进一步设置标签样式\lst@EndTag：（请注意，=是黑色的。）

\makeatletter
\gdef\lst@BeginTag{%
    \lst@DelimOpen
        \lst@ifextags\else
        {\let\lst@ifkeywords\iftrue
         \lst@ifmarkfirstintag\lst@firstintagtrue\fi\color{editorBlack}}}
\gdef\lst@EndTag{\lst@DelimClose\lst@ifextags\else\color{editorBlue}}
\lstset{
  morekeywords=[2]{weight},
  keywordstyle=[2]\color{violet},
  morekeywords=[3]{kg},
  keywordstyle=[3]\color{brown},
  otherkeywords={120},
  morekeywords=[4]{120},
  keywordstyle=[4]\color{green},
}
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <body>
    <!-- Paragraphs are fine -->
    <div id="box">
      <p>Hello World</p>
      <p id="test">Hello World</p>
            <pig weight=120kg></pig>
    </div>
    <div>Test</div>
  </body>
</html>
\end{lstlisting}

第四部分

（不负责任地说，混合 HTML、CSS、javascript 和任何后端都是​​不明智的。）

实际上，例如，PHP 解析器是\lst@definelanguage{PHP}独立编码的。我看不出它和 HTML 部分有什么关系。的逻辑alsolanguage=是将所有设置一起加载，而不能从 language_A 转义到 language_B。事实上，文档支持转义到 LATEX，并说

  1. 当您退出到 LATEX 时，请不要使用 listing 包的任何命令。

我不确定你想用 PHP 代码做什么。如果你想要将整行代码设置为单色，请尝试morecomment=[s][\color{PHP}]{<?}{?>}。在最坏的情况下，你可以退出lstlisting并使用不同的 . 再次输入language=（行号？我想这很容易。）

\begin{lstlisting}[language=HTML,numbers=left,firstnumber=100]
    <p>This is going to be ignored by PHP and displayed by the browser.</p>
    <p>This is going to be ignored by PHP and displayed by the browser.</p>
\end{lstlisting}
\vspace*{-10pt}
\begin{lstlisting}[language=PHP ,numbers=left,firstnumber=last]
    <?php echo 'While this is going to be parsed.'; ?>
    <?php echo 'While this is going to be parsed.'; ?>
\end{lstlisting}
\vspace*{-10pt}
\begin{lstlisting}[language=HTML,numbers=left,firstnumber=last]
    <p>This will also be ignored by PHP and displayed by the browser.</p>
    <p>This will also be ignored by PHP and displayed by the browser.</p>
\end{lstlisting}

第五部分

根据这一页：

  • 字符!并/使用一致的颜色来形成!DOCTYPE和/html。
  • 并且属性=使用相同的颜色。
  • 右侧始终"string"符合标准。

因此，让我展示一下我的最终版本：

  • 将!和/设为字母；忘记所有标签名称作为关键字。它们之所以被着色，只是因为。（如果要区分标签名称，请添加一些回来。记得同时markfirstintag=true添加XXX和）/XXX
  • 忘记将属性作为关键字；相反，同时破解\lst@BeginTag颜色属性。（同样，如果需要，可以添加回来）=YYY=
  • 感谢上帝，右边被 覆盖了。（你也许可以通过重新定义内部stringstyle=来区分这些字符串。）\lst@stringstyle\lst@BeginTag

\lstdefinelanguage{HTML5}{
  language=html,
  alsoletter={!/},
  markfirstintag=true,
  morecomment=[s]{<!--}{-->},
  keywords={},
}
\lstset{
  language=HTML5,
  tagstyle=\color{editorBlue},
  basicstyle={\small\ttfamily},
  identifierstyle=\color{editorOrange},
  keywordstyle=\color{editorPink},
  commentstyle=\color{editorGray},
  stringstyle=\color{editorPurple},
}
\makeatletter
\gdef\lst@BeginTag{%
    \lst@DelimOpen
        \lst@ifextags\else
        {\let\lst@ifkeywords\iftrue
         \lst@ifmarkfirstintag\lst@firstintagtrue\fi\color{editorLightGray}}}
\gdef\lst@EndTag{\lst@DelimClose\lst@ifextags\else\color{editorBlue}}
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <body>
    <!-- Paragraphs are fine -->
    <div id="box">
      <p>Hello World</p>
      <p id="test">Hello World</p>
            <pig weight="120kg" fat="100kg"></pig>
    </div>
    <div>Test</div>
  </body>
</html>
\end{lstlisting}

相关内容