WordPress.org

1. mrwolfy
   Member
   Posted 1 year 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/

2. James
   Happiness Engineer
   Posted 1 year 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/

3. mrwolfy
   Member
   Posted 1 year 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;
   }

4. James
   Happiness Engineer
   Posted 1 year ago #

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

5. mrwolfy
   Member
   Posted 1 year 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/

6. James
   Happiness Engineer
   Posted 1 year ago #

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

7. Alex Mills (Viper007Bond)
   Moderator
   Posted 1 year 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. :)

8. mrwolfy
   Member
   Posted 1 year 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.

9. James
   Happiness Engineer
   Posted 1 year ago #

   Thanks to James for the tip!

   You're welcome!

Topic Closed

This topic has been closed to new replies.