When we are writing tutorials or an example of code for any reason on our website or blog, it usually makes sense to make display that code as:
- Different block than the rest of the text.
- Attractive and easily readable
- With line numbers
Basically something like this:
- <div id='something'>
- <p>This is an example code</p>
- <a href='#'>example.com</p>
- </div>
Of course, the colors, fonts, background color of the block are all choice. But this is the basic structure we are looking to make.
Lets see how it is done with the following steps:
1 - First step is to write the code. If you writing on your blog or any CMS, just write the code in the 'view' or 'compose' mode. This, basically, is the other than the HTML mode. However, in case you are working on an IDE or text-editor, then you have type the code using special characters.
So '<' becomes '<' and '>' becomes '>'
2- When you are done with writing the code, wrap it in blockquote and make turn it into a list. You can do this either by clicking on 'quote' button while in the view/compose mode or by making the html look like this, in the HTML mode or your IDE
3- Now that you are done with the writing part, use the following CSS to give your display some style.
In wordpress you can open Appearance>editor>style.css and place it at the end of the file. In this case though, remove the <style> and </style> from the above given code.
5- Now, save your file/post and try it out.
So '<' becomes '<' and '>' becomes '>'
2- When you are done with writing the code, wrap it in blockquote and make turn it into a list. You can do this either by clicking on 'quote' button while in the view/compose mode or by making the html look like this, in the HTML mode or your IDE
- <blockquote class="tr_bq">
- <ol style="text-align: left;">
- <li><div id='something'></li>
- <li><p>This is an example code</p></li>
- <li><a href='#'>example.com</p></li>
- <li></div></li>
- </ol>
- </blockquote>
3- Now that you are done with the writing part, use the following CSS to give your display some style.
4- You can place this css code at the start of your page, in HTML mode. or if you are working with a CMS or a blog, then you can place it somewhere, from where it can apply to all your posts. For example: in blogger, you can go in template>edit HTML and place it between the <head> and </head>
- <style>
- blockquote ol
- {
- background-color:#d8d8d8;
- padding:10px 10px 10px 35px;
- color:#FFF;
- }
- blockquote ol li:nth-child(even)
- {
- background-color:#b5d4e3;
- color:#000;
- }
- blockquote ol li:nth-child(odd)
- {
- background-color:#b5def1;
- color:#000;
- }
- </style>
In wordpress you can open Appearance>editor>style.css and place it at the end of the file. In this case though, remove the <style> and </style> from the above given code.
5- Now, save your file/post and try it out.
No comments:
Post a Comment