javascript - Displaying html form tag in using SyntaxHighlighter

Question

I cannot get a HTML form tag to display as code on my website using the syntax highlighter library. Here is my code:

<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>

It displays in on my webpage like this:

I want it to display as code like this example:

The syntax highlighting is working fine on other snippets in the same blog post I am creating so I know that the library is loading okay. It just doesnt like the <form></form> tags

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