Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Other Discussions
  3. Site Bugs / Suggestions
  4. Tabbed Code Blocks

Tabbed Code Blocks

Scheduled Pinned Locked Moved Site Bugs / Suggestions
csharpquestion
14 Posts 7 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Karl Sanford

    I am in the very early stages of trying to come up with an article. For this article, I was thinking about providing the solution in C# and VB.NET, but I don't think the current code blocks can handle it without having 2 separate blocks for each section of code I will explain. I was thinking that it would be nice if we could have Tabbed code blocks (like MSDN)? This could facilitate multiple code language articles, but I could also see some other use cases: If you were explaining a main section of code, have the code in the first tab, then any ancillary classes can be included in tabs behind it.

    Be The Noise

    C Offline
    C Offline
    Chris Maunder
    wrote on last edited by
    #4

    Take a look at the Code Project Article FAQ[^] If you have the same code snippet shown in multiple languages (eg C# and VB versions of the same code) you can wrap muiltiple PRE blocks inside a <div class="code-samples"> and have the multiple code blocks appear in a tabbed form, similar to MSDN eg

    <div class="code-samples">
    <pre lang="C#">
    ...
    </pre>
    <pre lang="VB.NET">
    ...
    </pre>
    </div>

    Just make sure you set the lang attribute correctly

    cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

    K A B Sander RosselS 4 Replies Last reply
    0
    • C Chris Maunder

      Take a look at the Code Project Article FAQ[^] If you have the same code snippet shown in multiple languages (eg C# and VB versions of the same code) you can wrap muiltiple PRE blocks inside a <div class="code-samples"> and have the multiple code blocks appear in a tabbed form, similar to MSDN eg

      <div class="code-samples">
      <pre lang="C#">
      ...
      </pre>
      <pre lang="VB.NET">
      ...
      </pre>
      </div>

      Just make sure you set the lang attribute correctly

      cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

      K Offline
      K Offline
      Karl Sanford
      wrote on last edited by
      #5

      Awesome! :thumbsup: Next time, I will try to RTFM :doh:

      Be The Noise

      C 1 Reply Last reply
      0
      • K Karl Sanford

        Awesome! :thumbsup: Next time, I will try to RTFM :doh:

        Be The Noise

        C Offline
        C Offline
        Chris Maunder
        wrote on last edited by
        #6

        There's a lot of stuff and a lot of options. It's easy to miss.

        cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

        B 1 Reply Last reply
        0
        • C Chris Maunder

          There's a lot of stuff and a lot of options. It's easy to miss.

          cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

          B Offline
          B Offline
          Bassam Abdul Baki
          wrote on last edited by
          #7

          The correct response should have been "Booya!". :)

          Web - BM - RSS - Math - LinkedIn

          1 Reply Last reply
          0
          • K Karl Sanford

            I am in the very early stages of trying to come up with an article. For this article, I was thinking about providing the solution in C# and VB.NET, but I don't think the current code blocks can handle it without having 2 separate blocks for each section of code I will explain. I was thinking that it would be nice if we could have Tabbed code blocks (like MSDN)? This could facilitate multiple code language articles, but I could also see some other use cases: If you were explaining a main section of code, have the code in the first tab, then any ancillary classes can be included in tabs behind it.

            Be The Noise

            A Offline
            A Offline
            AspDotNetDev
            wrote on last edited by
            #8

            Example here. Thanks again, Chris & Co, for implementing this.

            Thou mewling ill-breeding pignut!

            K 1 Reply Last reply
            0
            • A AspDotNetDev

              Example here. Thanks again, Chris & Co, for implementing this.

              Thou mewling ill-breeding pignut!

              K Offline
              K Offline
              Karl Sanford
              wrote on last edited by
              #9

              Thanks for the great example. Exactly what I'm hoping to do :thumbsup:

              Be The Noise

              1 Reply Last reply
              0
              • C Chris Maunder

                Take a look at the Code Project Article FAQ[^] If you have the same code snippet shown in multiple languages (eg C# and VB versions of the same code) you can wrap muiltiple PRE blocks inside a <div class="code-samples"> and have the multiple code blocks appear in a tabbed form, similar to MSDN eg

                <div class="code-samples">
                <pre lang="C#">
                ...
                </pre>
                <pre lang="VB.NET">
                ...
                </pre>
                </div>

                Just make sure you set the lang attribute correctly

                cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

                A Offline
                A Offline
                AspDotNetDev
                wrote on last edited by
                #10

                Chris Maunder wrote:

                eg div class="code-samples">

                FYI, as you have pasted it here, that page is missing a less than (<) before the "div" (and the "eg" should probably not be on the same line). Also, considering this is an HTML snippet, I'd think you would want to wrap it in a PRE block. :)

                Thou mewling ill-breeding pignut!

                1 Reply Last reply
                0
                • C Chris Maunder

                  Take a look at the Code Project Article FAQ[^] If you have the same code snippet shown in multiple languages (eg C# and VB versions of the same code) you can wrap muiltiple PRE blocks inside a <div class="code-samples"> and have the multiple code blocks appear in a tabbed form, similar to MSDN eg

                  <div class="code-samples">
                  <pre lang="C#">
                  ...
                  </pre>
                  <pre lang="VB.NET">
                  ...
                  </pre>
                  </div>

                  Just make sure you set the lang attribute correctly

                  cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

                  B Offline
                  B Offline
                  Brisingr Aerowing
                  wrote on last edited by
                  #11

                  :thumbsup:

                  Bill Gates is a very rich man today... and do you want to know why? The answer is one word: versions. Dave Barry Read more at [BrainyQuote](http://www.brainyquote.com/quotes/topics topic_technology.html#yAfSEbrfumitrteO.99)[^]

                  1 Reply Last reply
                  0
                  • C Chris Maunder

                    Take a look at the Code Project Article FAQ[^] If you have the same code snippet shown in multiple languages (eg C# and VB versions of the same code) you can wrap muiltiple PRE blocks inside a <div class="code-samples"> and have the multiple code blocks appear in a tabbed form, similar to MSDN eg

                    <div class="code-samples">
                    <pre lang="C#">
                    ...
                    </pre>
                    <pre lang="VB.NET">
                    ...
                    </pre>
                    </div>

                    Just make sure you set the lang attribute correctly

                    cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

                    Sander RosselS Offline
                    Sander RosselS Offline
                    Sander Rossel
                    wrote on last edited by
                    #12

                    Hi Chris, I asked the same question last week and was forwarded to this post. So I tried what you said and somehow failed miserably... :( Could you, or someone of the staff, an editor, please have a look at where I went wrong? This is the article that should now have tabbed code blocks, but hasn't... A Look under the hood of the .NET Framework[^] Thanks!

                    It's an OO world.

                    public class Naerling : Lazy<Person>{
                    public void DoWork(){ throw new NotImplementedException(); }
                    }

                    C 1 Reply Last reply
                    0
                    • Sander RosselS Sander Rossel

                      Hi Chris, I asked the same question last week and was forwarded to this post. So I tried what you said and somehow failed miserably... :( Could you, or someone of the staff, an editor, please have a look at where I went wrong? This is the article that should now have tabbed code blocks, but hasn't... A Look under the hood of the .NET Framework[^] Thanks!

                      It's an OO world.

                      public class Naerling : Lazy<Person>{
                      public void DoWork(){ throw new NotImplementedException(); }
                      }

                      C Offline
                      C Offline
                      Chris Maunder
                      wrote on last edited by
                      #13

                      All fixed.

                      cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

                      Sander RosselS 1 Reply Last reply
                      0
                      • C Chris Maunder

                        All fixed.

                        cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP

                        Sander RosselS Offline
                        Sander RosselS Offline
                        Sander Rossel
                        wrote on last edited by
                        #14

                        Thanks Chris, looks great! :D

                        It's an OO world.

                        public class Naerling : Lazy<Person>{
                        public void DoWork(){ throw new NotImplementedException(); }
                        }

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • World
                        • Users
                        • Groups