使用SyntaxHighlighter显示html表单标签

Question

我无法使用语法高亮显示库将HTML表单标记显示为我网站上的代码。这是我的代码：

<pre class="brush: js">
    <form class="formOne">
         <div class="clear-fix">

                            <ul class="list-0 clear-fix">
                                <!-- Name -->
                                <li>
                                    <div class="block field-box">
                                        <label for="contact-form-name">Your Name</label>
                                        <input type="text" name="contact-form-name" id="contact-form-name" value=""/>
                                    </div>
                                </li>
                                <!-- /Name -->
                                <!-- E-mail address -->
                                <li>
                                    <div class="block field-box">
                                        <label for="contact-form-mail">Your E-mail</label>
                                        <input type="text" name="contact-form-mail" id="contact-form-mail" value=""/>
                                    </div>
                                </li>
                                <!-- /E-mail address -->

                                <!-- Message -->
                                <li>
                                    <div class="block field-box">
                                        <label for="contact-form-message">Your message</label>
                                        <textarea name="contact-form-message" id="contact-form-message" rows="1" cols="1"></textarea>
                                    </div>
                                </li>
                               <div id="captchaHolder">
                                    {% autoescape false %} {{captcha}} {% endautoescape %}
                                </div>
                                <!-- /Message -->
                                <h5 id="submitResponse"></h5>
                                <!-- Submit button -->
                                <li>
                                    <div class="block field-box field-box-button">
                                        <input type="submit" id="contact-form-submit" name="contact-form-submit" class="button" value="Submit"/>
                                    </div>
                                </li>

                                <!-- /Submit button -->
                            </ul>

                        </div>
    </form>
</pre>

它显示在我的网页上，如下所示：

我希望它显示为像这个例子的代码：

语法突出显示在我正在创建的同一博客文章中的其他片段上正常工作，所以我知道该库正在加载正常。它只是不喜欢<form></form>标签

Answer 1

我明白了。您必须使用安装SyntaxHighlighter的方法。

<script type="syntaxhighlighter" class="brush: js"> 
<!-- Contact form -->
                    <form name="contact-form" id="contact-form" class="contact-form clear-fix" target="uploader_iframe">

                        <div class="clear-fix">

                            <ul class="list-0 clear-fix">
                                <!-- Name -->
                                <li>
                                    <div class="block field-box">
                                        <label for="contact-form-name">Your Name</label>
                                        <input type="text" name="contact-form-name" id="contact-form-name" value=""/>
                                    </div>
                                </li>
                                <!-- /Name -->
                                <!-- E-mail address -->
                                <li>
                                    <div class="block field-box">
                                        <label for="contact-form-mail">Your E-mail</label>
                                        <input type="text" name="contact-form-mail" id="contact-form-mail" value=""/>
                                    </div>
                                </li>
                                <!-- /E-mail address -->

                                <!-- Message -->
                                <li>
                                    <div class="block field-box">
                                        <label for="contact-form-message">Your message</label>
                                        <textarea name="contact-form-message" id="contact-form-message" rows="1" cols="1"></textarea>
                                    </div>
                                </li>
                               <div id="captchaHolder">
                                    {% autoescape false %} {{captcha}} {% endautoescape %}
                                </div>
                                <!-- /Message -->
                                <h5 id="submitResponse"></h5>
                                <!-- Submit button -->
                                <li>
                                    <div class="block field-box field-box-button">
                                        <input type="submit" id="contact-form-submit" name="contact-form-submit" class="button" value="Submit"/>
                                    </div>
                                </li>

                                <!-- /Submit button -->
                            </ul>

                        </div>

                    </form>
</script>

您可以在此处找到有关如何使用该方法以及优缺点的更多信息：http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html