Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    new to html+CSS: edit one html tag to copy another?

    im fairly unfamiliar with html and CSS.

    ive got a syntax highlighter for blogspot, (http://genuinescope.blogspot.com/201...rblogspot.html) that uses the html tag
    Code:
    <pre class="xml" name="code">
    html-escaped code samples
    </pre>
    I previously used my own edited <code> tag used on alot of posts.
    Ideally, i dont want to have to re-edit most of my posts and replace my code tag with the with the new pre syntax highlighter tag, is there a way I can get my existing code tag to use the custom pre tag?

    ie
    Can I edit my <code> tag in CSS to mimic the <pre class="xml" name="code"> tag rather than replacing each <code> tag in blog posts?

    Apologies for the description.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by ldunham1 View Post
    im fairly unfamiliar with html and CSS.

    ive got a syntax highlighter for blogspot, (http://genuinescope.blogspot.com/201...rblogspot.html) that uses the html tag
    Code:
    <pre class="xml" name="code">
    html-escaped code samples
    </pre>
    I previously used my own edited <code> tag used on alot of posts.
    Ideally, i dont want to have to re-edit most of my posts and replace my code tag with the with the new pre syntax highlighter tag, is there a way I can get my existing code tag to use the custom pre tag?

    ie
    Can I edit my <code> tag in CSS to mimic the <pre class="xml" name="code"> tag rather than replacing each <code> tag in blog posts?

    Apologies for the description.
    The short answer is "yes." The CSS would look something like this:

    Code:
    code{font-weight:bold;color:#fff;background-color:#f00;/*or however you want things to look...*/}
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The only thing needed to make <code> behave like <pre> is:

    Code:
    code {display : block; white-space : pre;}
    You'd also need to apply whatever styles are attached to the xml class.

    The name attribute is invalid on pre tags.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cheers guys.
    I already have a customised <code> tag
    Code:
    .post code{
    width: 613px;
    margin: 10px 0px 10px 0px !important;
    background-color: #444;
    font: 13px arial,sans-serif;
    line-height: 20px;
    color: #DF7401;
    white-space: pre-wrap;
    border: solid 1px #777 !important;
    border-collapse: separate;
    padding: 8px !important;
    float: left;
    text-shadow: sienna 0px 0px 5px;
    }
    The problem is that the syntax highlighter doesn't simply have a single edit for the <pre> tag, otherwise i would just copy it over to my <code> tag.
    Instead there's alot of CSS for .dp-highlighter etc, and at no point is the <pre> tag mentioned.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    If you don't already have it, I recommend you get Firebug for Firefox.

    The style code from your link is all activated when javascript digests the code within the <pre></pre> tags and picks out elements, functions, attributes (etc.) and adds classes to them for styling. Those classes are what you see the styles for in your linked page (as seen in action in the attached image below, generated from this page).

    So if you're talking about emulating all of that with your existing syntax highlighter then you just need to examine each type of syntax in their example page (using Firebug to view the CSS involved) and individually copy over the styles to the correlating syntax style rules within your syntax highlighter until it all matches. The <pre></pre> tags themselves are not styled with the syntax highlighter from your link (in fact, from a quick peek, it appears as though they are removed entirely from the result) so you will never see style rules relating to the <pre> tags themselves.

    Otherwise, if you are talking about editing their javascript to run off of your <code> tags instead of <pre> tags, then you're not only signing up for a potentially looong day, but you are also in the wrong part of the forum to get help with this.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats great Rowsdower!, thanks!
    I've had a look with chrome's developer tools to retrieve the CSS involved, but will check out Firebug.
    I've read that avoiding the use of <pre>, with RSS readers, can cause the content to be skipped, which I don't particularly want.
    I'm going to use the <pre> for now (and from now on), and on the side copy the styles over, as you suggested, until they match and I have a better understanding.
    And i've no intention of editing their javascript to use my tag, but thanks for the head up lol

    Cheers again


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •