3 ways to put HTML, CSS, JS code example in a box

1. THE SIMPLEST WAY : Is to use a Codebutify online tool to colorize the code like hilite.me , markup.su e,c,t and paste the code , the resault:

<style>
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #000;
    text-decoration: none;
}
</style>

The problem using this method is the post page overflow who neded to fix it manualy

1. THE EASY WAY: Is to colorize the code as the way 1 and ... we use a simple table cell as textarea  and in the table area drag n drop the colorized code this method have the advantage who we no need to use HTML code , and the update is very easy , the resault:

<style> .Label li:hover { transform: rotate(5deg); } .Label li { border: 1px solid; border-radius: 6px 6px 6px 6px; color: #000000 !important; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label a { color: #000; text-decoration: none; } </style>

To make and colorise the table you can use a simple online editor like tinymce or google.docs 

The problem using this method is the post page overflow who neded to fix it manualy

3. THE HARD WAY : IS to Use a textarea but you must prefix text area and paste the code using HTML mode

<center>
<textarea  rows =20 cols="50">

Your examble code here 

</textarea>
</center>

Using this method No need to edit the post page overflow. So this method is the best way to share compresed code.

Plus using prefixed thext area and the scrolbars we share huge code , using small space in the post page , the resault:

<style> .Label li:hover { transform: rotate(5deg); } .Label li { border: 1px solid; border-radius: 6px 6px 6px 6px; color: #000000 !important; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label a { color: #000; text-decoration: none; } </style>

© Resource http://superblogger3.blogspot.gcom the exampe is free to share it to your page or blog or your social media page.

Go back to home page