I am trying to modify a CSS file using Sublime Text 2, however, all the code is presented in one linebreaks with no line break whatsoever.
What can I do to change that into readable code?
Try using Code Beautifier. You input the code and it formats it for you. There are many other sites like this one so check around and see which one you like best.
If you want to use a Sublime Text plugin, try CSS Format by mutian.
EDIT: As said by Imran Bughio, CSS Beautify is another site like Code Beautifier.
EDIT 2: As noted by Beginner, CSSLisible is another option.
Go to this site CSSLISIBLE. paste your css code and click Clean this code button..
Related
Hi im using atom and atom-minify
I would like to remove all references to https://websiteaddress.com but only in the minified file.
I only know html and css, but I came across inline-parameters where i can add some code to the top of the page and atom-minify will run it.
I found this:
::scan(regex, iterator) which makes sense but how do I input this
Here is my best guess for what to put at the top of each page in atom, any help would be much appreciated:
/* minifyOnSave, scan(https://websiteaddress.com, replace) */
You could use Atom's built in search and replace feature
The default keybind for this is ctrl-f or command-f if you are on mac.
Im using atom.io for some time now and really like it. there is just one thing im missing. I used to use brackets and sublime before and they both had a feature where you could create the basic structure of a html documents by just typing html.
this would just set the html, head and body tag. created the charset meta, title and link to css file.
I create a lot of html files a day so it would be really helpfull if I know the shortcode or the package which supports this!
You're looking for autocomplete-snippets.
Simply type html and press Enter
Here's a terrible GIF to prove it:
There is a nice Plugin, called emmet: https://atom.io/packages/emmet
When you got that, you just have to type ! -> tab in an empty document. You get pretty much the same result as #hatchet GIF.
If you have disabled the autocomplete functionality mentioned in the currently accepted answer, or want more flexibility than that allows, there is a file-templates package:
https://atom.io/packages/file-templates
Here are some basic instructions.
To install the package: edit->preferences->install->file-templates.
To save the template: packages->new template from this file.
To open a new file with that template, just hit ctrl-alt-n and
select it.
Make sure your file has .html added on the end of its name.
Then go back into Atom, type HTML, and press enter. Your boilerplate should appear. Solved my problem instantly!
If we install Emmet package we are not getting the boiler plate code. So I disabled emmet and it is working fine for me.
!tab is the command u seek. But it won't work unless you create a file and save it with the html extension...
So go create a new file in the directory u want, call it index.html and now go type !tab
It should work 100%, if not be sure u have emmet installed.
I'm trying to get code highlighting to work for a simple blog built with jekyll. I want to be able to do code highlighting within posts written in markdown so I enabled redcarpet as markup language. This works all fine, the code gets formatted in <pre></pre> tags and all the various elements of the code get corresponding classes. e.g.
<span class="n">function</span>
<span class="n">saySomething</span>
<span class="p">()</span>
<span class="p">{</span>
etc.
This is awesome but this doesn't give us of the actual highlighting (color) yet. So I suppose there must be some css ready to copy and paste which actually does the styling of the different code elements. Or am I missing something completely?
I looked into some code highlighting libraries like prettify or prism but these do their own formatting with javascript in the browser. But since redcarpet already does the heavy lifting work of formatting the code it is not necessary doing it again.
Any hints?
You need some CSS magic. Use this one or pick one from here.
You can create the CSS with the highlighter itself
rougify style > rouge.css
Or
coderay stylesheet > coderay.css
I like to share the solution as I faced and it took much time to get rid of this issue. Default syntax highlighting is very poor in Jekyll. Like David said, You really need some CSS magic. Check this gist to solve the syntax highlighting problem.
I'm currently trying to learn Sublime Text 2, and so far I'm very impressed. But there are some things that I need compared to what I used for editor before (Microsoft Expression Web).
When I had a HTML file and had a class for a div or something. Then I wrote fx:
<div class="classname"></div>
Then I could CTRL + click on the classname, and it would instantly take me to the CSS file where this class was located, and to the line where it was, and I was able to edit it right away, instead of going into the CSS file and make a search.
Is this possible in Sublime Text 2 as well, or...?
Thanks in advance.
Unfortunately, there is no built in feature that does what you require.
But luckily there is a dev who created a plug-in, that does exactly what you want.
Take a look here: Goto CSS Declaration
In addition to the "Goto CSS Declaration" plug-in, that No Reply linked to in their answer, you can press ctrl+P, which let's you jump around in files.
Unofficial Documentation for more details
I need to format text in posts using WordPress to look like a code. Like here in stackoverflow we use { } to separate the code from the text. I need to do the same when I write my blogs in Wordpress
Example ....
code will look like that !
Do you like the one used here: http://inturnets.com/2012/06/a-nice-tackling-with-jquery-and-css.html ?
It's the syntaxhighlighter wp plugin, http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/ , a very customisable one and finally you are using simple tags like [html] html code [/html] or [css] css code [/css]
Good luck! :)
Wordpress has a preformatted paragraph style that works OK without any plugins. Just select the text and then select the Preformatted style on the left side of the formatting bar:
I had installed a plugin, but then found this simpler and it works fine for my purposes.
This might be helpful to you
http://textformat.in/
Please do vote if it worth