basic html help, help!

  • Resolved mrwolfy

    (@mrwolfy)


    15 years, 7 months ago

    Hi,

    I am trying to add code to my web site, using a custom code class. To keep the code “clean” I add the pre tag.

    my basic setup is like this:

    <pre>
<div class ="code"> /* 17L02.c: Using the free() function */
 #include <stdio.h>
 #include <stdlib.h>

 /* main() function */
 main()
 {

}
</div>
</pre>

    The problem is, for some reason the resulting post is omitting code between the < and > symbols. I suppose because it is reading this as html. I thought that the pre tag would hide the html from WordPress, so that every character would show up exactly as typed. Am I missing something?

    See post here:
    http://oliverwolfson.com/codeclass/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator James Huff

    (@macmanx)

    15 years, 7 months ago

    No, <pre> won’t work. You’ll have to use the HTML editor and wrap the code in <code> </code> tags.

    If that doesn’t work, try this plugin:

    http://wordpress.org/extend/plugins/syntaxhighlighter/

    Thread Starter mrwolfy

    (@mrwolfy)

    15 years, 7 months ago

    Yeah, I’m not sure why but the code tag has never worked for me, does nothing. That is why I wrote my own css class just to add a gray background and border.

    A good question might be: why does the code tag do nothing? Please look at my css if you like, maybe the answer could be found there.
    http://oliverwolfson.com/wp-content/themes/oliverwolfsondotcom/style.css

    Still the pre tag should hide the html, no??

    This is the custom “code” css I am using:

    .code {
	color: dimgray;
	font-family: courier, serif;
	background-color: #EEEEEE;
	padding: 10px;
	border: 1px solid #888888;
	margin: 0 20px 0 20px;
	width: 530px;
}
    Moderator James Huff

    (@macmanx)

    15 years, 7 months ago

    Honestly, I’m not sure. There could be something conflicting with the code filtering. Did you try the plugin?

    Thread Starter mrwolfy

    (@mrwolfy)

    15 years, 7 months ago

    the plugin works, in that it does display the code in full. Thanks.

    Unfortunately it does not seem to style the text. I just get the code against a white background. Improved, but not fixed. I may have to rewrite all of the css. it’s acting weird now.

    I’ve updated the post

    http://oliverwolfson.com/codeclass/

    Moderator James Huff

    (@macmanx)

    15 years, 7 months ago

    That does sound like a CSS conflict. The least few times that I used the plugin it worked out of the box.

    viper007bond

    (@viper007bond)

    15 years, 7 months ago

    Your theme is missing wp_footer(), a required theme hook. Add it somewhere inside your theme’s footer.php file and then the Javascript will be outputted and your code highlighted (the highlighting is done in your browser using Javascript rather than on your server using PHP and outputting lots of HTML/CSS). 🙂

    BTW, <pre> and <code> are formatting tags. They don’t tell your browser to escape all HTML tags inside of them. It’s not a WordPress issue, it’s how browsers work:

    <pre><strong>this will be bold text and you won't see the strong tags</strong></pre>

    Correct (I had to add spaces after the &‘s for these forums):

    <pre>& lt;strong& gt;this will be bold text and you won't see the strong tags& lt;/strong& gt;</pre>

    My plugin takes care of that for you. 🙂

    Thread Starter mrwolfy

    (@mrwolfy)

    15 years, 7 months ago

    Yes thank you Alex, that fixed it! It is working perfectly now. I love the plugin. Thanks to James for the tip!

    I added <?php wp_footer(); ?> to the footer.php.

    Thanks also for the notes on html Alex.

    Oddly the code tag still does work, oh well for now, syntaxHighlighter is better anyway.

    Moderator James Huff

    (@macmanx)

    15 years, 7 months ago

    Thanks to James for the tip!

    You’re welcome!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘basic html help, help!’ is closed to new replies.