如何用w3codecolor.js实现Python语法高亮？新手遇效果不符问题

嘿，作为刚接触前端的新手，遇到这个样式匹配问题太正常了！我来帮你一步步搞定它：

1. 先修正语法高亮的类名 #

w3codecolor.js识别Python语法是靠内置的特定类名python，而不是你自定义的pythonHigh。所以第一步得把代码块的类名改成w3-code python，这样库才能正确触发Python的语法解析规则。

2. 自定义CSS贴近Jupyter Notebook的样式 #

w3codecolor的默认高亮样式偏基础，和Jupyter的风格差异很大，我们可以通过自定义CSS覆盖默认样式，完美模仿Jupyter的配色。

下面是修改后的完整代码，我已经帮你调整了类名，还添加了贴近Jupyter的自定义样式：

<head> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
    <script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
    <style>
        /* 模仿Jupyter Notebook的Python高亮样式 */
        .w3-code.python .w3-c-kw { color: #0000FF; } /* 关键字（def、if、else等） */
        .w3-code.python .w3-c-st { color: #BA2121; } /* 字符串 */
        .w3-code.python .w3-c-cm { color: #008000; font-style: italic; } /* 注释 */
        .w3-code.python .w3-c-fn { color: #7A007A; } /* 函数名（apply、read_csv等） */
        .w3-code.python .w3-c-nu { color: #0000FF; } /* 数字 */
        .w3-code.python .w3-c-op { color: #000000; } /* 操作符（=、<=等） */
        .w3-code.python .w3-c-ob { color: #000000; } /* 括号 */
    </style>
</head> 
<div id="myDiv"> 
    <div class="w3-panel w3-card w3-light-grey"> 
        <h3>Example code, oh yeah baby</h3> 
        <div class="w3-code python"> 
            <pre><code>df = pd.read_csv('UCI_Credit_Card.csv') 
def valuation_formula(limit): 
    if limit<=10000.: 
        return 'A' 
    elif limit<=100000. and limit>10000.: 
        return 'B' 
    elif limit<=200000. and limit>100000.: 
        return 'C' 
    elif limit<=400000. and limit>200000.: 
        return 'D' 
    elif limit<=700000. and limit>400000.: 
        return 'E' 
    else: 
        return 'F' 
df['NEW_COLUMN'] = df.apply(lambda row: valuation_formula(row['LIMIT_BAL']), axis=1) 
df.head(10) </code></pre> 
        </div> 
    </div> 
</div> 
<script> 
w3CodeColor(document.getElementById("myDiv")); 
</script>

关键调整说明： #

• 把pythonHigh替换成python，这是w3codecolor.js内置识别的Python模式类名；
• 添加内联CSS，针对w3codecolor生成的不同语法标记类（比如w3-c-kw对应关键字）设置颜色，完全对齐Jupyter的高亮风格；
• 我还帮你把代码块里的Python代码做了换行，可读性更好，你可以根据需求自行调整格式。

这样修改后，你在EdX平台上就能看到和Jupyter Notebook几乎一致的Python语法高亮效果啦！

内容的提问来源于stack exchange，提问作者Freddiellow