Introduction
This week, instead of working on new part of my series in how to create a responsive grid system in CSS, I have decided to do other thing. What I did is I created a tool that can be used to create a nicely formatted CSS code snippets that can be added to any website.
The Idea Behind The Tool
If you was following with me for the last few weeks, you will for sure know that I was writing blog posts about how to build a responsive grid system using CSS. One issue that I had is writing CSS code snippets in my posts. What I used to do is to write the CSS code and format it manually which takes a lot of effort and time.
After realizing that, I decided to create a tool that I can use to create the code snippets automatically. By doing that, I will save a lot of time and effort. After working on the tool for the last two weeks, the tool is ready for public use and available in my official website, Programming Academia Under the name CSS Syntax Highlighter and Formatter.
Using The Tool
In order to insert the code snippet in your web site, there are only 4 steps to do:
Including CSS File
The first step is to include the following <link> tag inside the <head> tag.
Code
<link rel="stylesheet" href="https://www.programmingacademia.com/res/css/code-theme.css">This CSS file is basically the theme that will be applied to the different keywords within your CSS code. Also it contains some formatting parameters to make the code snippet looks good in big and small screens.
Copying and Pasting Your CSS Code
In this step, All what you need to do is to copy your CSS code and past it within the tool. Suppose that we have the following CSS code that we would like to add to our blog:
/*For mobile*/
@media screen and (max-width:760px){.col{width:100%}}
/*For Big Screens*/
.col-1{width:50%}
.col-2{width:100%}As we can see, the code is kinda messy and not beautiful to add in a web page. Simply we copy it and past it in the tool.
Past your CSS code in the shown area.
Click 'Highlight'
Once you click the button that is labeled as 'Highlight', you will get two things, The first thing is an editable HTML code that you can copy and past in your web page and secondly, A preview of how the code snippet will look like.
The Generated Code Snippet as HTML with Preview.
Copying The Generated HTML Code
The last and final step is to copy the generated HTML code and past it in the web page that you would like to show the code snippet in. Also it is possible to edit the code if you would like to add or remove extra stuff.
And this is how you can use this simple tool. Please give me your opinion about it and provide me with your feedback. Also I will be more than happy if you share it with your friends and any one in need for such as tool 😄.
No comments:
Post a Comment
Feel free to write any thing in your mind here 😉