Question

我正在使用＆＃34;查找并替换＆＃34;键入javascript函数，并使用<code>标记替换HTML中的所有反引号，并使用</code>标记替换所有井号。出于某种原因，我的样式不起作用，除非我使用.css()方法在JS文件中对它们进行编码。

理想情况下，组合应该在反引号和井号之间输出代码作为阻止的<code>内容，（<code>标记是从JavaScript生成的）具有柔和的灰色背景。然而，出于某种原因，这些风格并没有显现出来。

如果有人可以提供帮助，我会非常感激。

这是我的html文件test.html：

<!DOCTYPE html>
<head>
<title>Script Test</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="styles/code/style.css" type="text/css">
</head>
<body>
<p>This is some code:
    `var p = 10; #  
    `var a = 5; #   
    `var x; #   
    `x = a * p; #    
    `console.log(x); #
    All I want is for this to work!
</p>
<script src="codeStyle.js"></script>
</body>

我的CSS文件（从SASS编译）style.css：

body {
  color: #121212;
  font-family: 'Helvetica Neue', serif;
  font-weight: 300;
  letter-spacing: .25px; }

  body div.container {
    padding: 10px; }

    body div.container code.styled {
      font-family: arial, serif;
      background-color: #f9f9f9; /* soft gray bg color */
      display: block; /* block display style */
      margin: 2px 0 2px 2.5%;
      padding: 3px;
      width: auto;
      background-color: #fafafa;
      border: 1px solid #f5f5f5; }

 /*# sourceMappingURL=style.css.map */

我的js文件codeStyle.js：

$('p').each(function() {
var text = $(this).html(); // Grab HTML from each <p>
text = text.replace(/`/gi,"<code class='styled'>"); // Replaces every ` with <code>
text = text.replace(/#/gi,"</code>"); // Replaces every # with </code>
$(this).html(text); // Set <p> html as replaced code
});

Answer 1

让Partick回答：你的CSS试图瞄准一个不存在的元素。

问题在于CSS：

 body div.container code.styled { }

没有与此选择器匹配的内容，因为没有<div class="container">

要解决此问题，您可以从CSS中删除有问题的选择器：

body code.styled {}

或将所需的选择器添加到HTML：

<div class="container">
    <p>Some text <code class="styled">some code</code>.</p>
</div>

这是 Fiddle 的工作原理。

样式化JS生成的代码

1 个答案: