Sublime Text: Hide all code and show only comments - css

I find it tedious to manage very large style sheets in Sublime Text 3.
Some of my stylesheets are about 2000 lines of code. I am trying to figure out how to navigate more easily within the stylesheet. I already know about bookmarks and the brilliant search function, but another way would be to hide/fold all code and show comments only. Tis way it would be easier to find the correct place you want to go to.
So is there a way to hide all code below a comment? This would be something as the opposite of Fold Comments
I know Hugo proposed the classic "fold all" solution here. But I would like to hide absolutely all code and display comments only.
For example:
/*******************************************************************
Description 1
*******************************************************************/
Hide/fold all code between here...
...
...
..
.
.
/*******************************************************************
Description 2
*******************************************************************/

You can fold everything, which is not a comment by opening the console ctrl+` and write view.fold(view.find_by_selector("-comment")).
This searches all regions with the selector - comment, which means everything except comments. Afterwards these regions are folded.
If you want to create a keybinding for it, just create a plugin. Open Tools >>> Developer >>> New Plugin and paste:
import sublime_plugin
class FoldEverythingExceptCommentsCommand(sublime_plugin.TextCommand):
def run(self, edit):
regions = self.view.find_by_selector("-comment")
self.view.fold(regions)
Afterwards add this to your Key Bindings - User to add a keybinding for the command:
{
"keys": ["ctrl+alt+shift+f"],
"command": "fold_everything_except_comments"
},

You can use the arrows in the far left of the text editor. Sublime has the line number listed down the left and beside those numbers are tiny arrows.

Related

How to collapse a Java code cell (made in Jupyter Notebook) on a website with Jekyll blog posts?

I have a blogging website using fastpages, which allows me to create Jekyll posts, along with posts created with Jupyter Notebook.
I'm creating a Jupyter Notebook post in VS Code that is using the Java kernel and want to hide a Java code cell.
The fastpages README says that you can hide a code cell with #collapse at the top of the code cell, while its blog website says that you can use #collapse-hide.
I tried both of these options on my code cell, but when I run them, it says illegal character: '#'
I think the issue might be that #collapse-hide might only work for Python cells, but I'm pretty lost when searching for the problem.
The Jupyter Notebook documentation says that you can hide code cells with
{
"tags": [
"hide-input",
]
}
but I do not know where to put this metadata in.
On that page, there is also a link to a cell tags guide. I tried Step 1 (by clicking View -> Cell Toolbar -> Tags), but after clicking the Tabs button, I do not know what to do. I also tried going to View -> Cell Toolbar -> Edit Metadata, but when I paste the metadata above, it says Could not save invalid JSON
(by the way, I am using Jupyter Notebook on my localhost now, not VS Code)
I tried removing the curly braces from the metadata (because I think the curly braces would be for if I only paste the metadata and there isn't the other stuff (like "vscode": {...?), but the same error occurs.
I don't know how to code in JSON, I would just like to be able to hide my code cell on my website, like this:
I do not even know if I am heading in the right direction. Basically, I would like to know: how can I hide my Java code cell?

Package for showing all possible CSS values in Sublime Text 2?

With the basic Sublime Text 2 build, I am getting CSS value autocompletion only when I type the first letter of the value, as seen in the image below.
However, I've been watching the Tuts HTML+CSS web tutorials (here is an example video), and his Sublime Text build shows all possible CSS for a given attribute. Below is a screenshot from the linked example video.
My question is what setting or package allows for the display of all possible CSS values for a given attribute?
No additional packages or specific settings were needed to solve this issue. The Ctrl/Cmd+Space keyboard shortcut natively displays all possible completions.
Try different plugins through Package Control.
Specifically trying these may work for you:
CSS Completions
Emmet CSS Snippets
CSS Extended Completions (requires ctrl/cmd + space)
There is no package needed in Sublime Text 2 to display all possible completions, e.g. all possible values for a CSS property, but LaceLafontaine's answer is no longer current. Cmd+Space doesn't work on Macs, partially because it's a shortcut for a spotlight search.
Currently the shortcut to display the completions in OSX is Ctrl+Space. I believe it's the same for both Mac and PC. The issue was discussed here: https://github.com/processing/processing/issues/2699
Linux Users
For me it worked when I config using this:
"auto_complete_triggers":
[
{
"characters": ": ",
"selector": "source.css",
},
],
And then you use Space as trigger.
There is an additional space before every value, but Minify or HTML-CSS-JS Prettify will delete all these spaces

Existing code has no line break

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..

How to bookmark code in XCode 4?

I couldn't find a way to put a bookmark inside the code in XCode 4. I know about the #pragma mark thing but it's not what I'm looking for. What I need is something that I can put and remove with a mouse click and navigate amongst with next and previous, like in VS.
Is there anything that I'm missing?
Bookmarks seem to have gone the way of the dinosaur in Xcode 4. This wouldn't have been so bad had the jump-to-bookmark popup above the editor in previous versions not also disappeared. The best replacement currently seems to be to use breakpoints (disabled individually, of course) and navigate with the Breakpoint Navigator.
Shortcut to breakpoints is Cmd + 8. Once there use arrow keys
File a bug report at http://bugreporter.apple.com if you feel something like this should be brought back.
Write below comment in your source file that you want bookmarked.
//<##>
And you can navigate to next / previous with: '^/' or '^?'
<##> means "placeholder of code snippet"
^/ means "jump to next placeholder"
^? means "jump to previous placeholder"
thanks
Another option, if anyone is still interested. The following directives will both produce a compiler warning that you can use as a bookmark:
#pragma message "<# message #>"
or
#warning <# message #>
If you want to place bookmarks using your mouse: create a code snippet with one of the 2 directives above. Drag & drop it to the line in your source file that you want bookmarked.
Navigate to next/previous with: Cmd-' and Cmd-Shift-'
In Xcode 4.4, if you leave a comment with this format:
// TODO: Your text here
it will be added as a listing in the jump bar alongside the list of methods in your current file, and then you can jump straight to that comment from that menu.
The simplest technique is to use a comment prepended by // TODO and then search, which allows you to jump through the issues from the navigator. Pretty hard to beat that technique.
I personally don't like using break points for bookmarks because it is not easy to enter notes. I use breakpoints as breakpoints, and prefer not to mix them up with bookmarks.
Anyhow, if you want to get a bit fancier you could get xcode to generate warnings // TODO: some message or // FIXME: some message that can be navigated in the issue navigator. I took the instructions below from this site:
Instructions
Head over to your project's item in the Project Navigator (usually at the very top)
Find your target in the list of targets on the left, select it
Head over to the "Build Phases" tab.
Click the "Add Build Phase" in the bottom right of this screen.
In the editor that appears insert the bash script shown below.
Now just build and you'll see all your //TODO: and //FIXME: comments have become warnings. I love this technique, it might not be right for everyone, but hope it helps someone.
Bash Script For "Run Script" Build Phase
KEYWORDS="TODO:|FIXME:|\?\?\?:|!!!:"
find "${SRCROOT}" ( -name ".h" -or -name ".m" ) -print0 | xargs -0 egrep --with-filename --line-number --only-matching "($KEYWORDS).*\$" | perl -p -e "s/($KEYWORDS)/ warning: \$1/"
You'll also be able to click on each of the warnings in the issue navigator to go right to the file and point in your code where you left the original //TODO: or //FIXME:
Extra pro tip: Make sure you're using phrases to describe your //TODO: comments like //TODO: Handle this error gracefully, and things like that. The phrases will show up in the issues list beside each warning.
Credit for the little tidbit should go to "Tim" on the Cocos2D forums, (found after Googling for a bit), I believe his solution originally was intended for Xcode 3 and didn't work if you had spaces in your path name, my script here doesn't have those restrictions, still he should get full credit here's his original post.
Like npellow's answer to this question of mine, appCode by JetBrains has also made this possible. So, this may be another reason to use appCode instead of Xcode4, except that it won't be free later in time.
My method:
type in grammar error code in the previous line.....
After changing something in other place, I can go back to the previous place because the grammer error line will show a red line in the right side scroll bar. It indicate the place.
It is not elegant but unless there is a bookmark feature, this is the way i am using at the moment
You can install an Xcode plugin called "XBookmark".
This plugin provide features below :
Toggle Bookmark
Show Bookmarks
Next Bookmark
Previous Bookmark
How to install XBookmark:
Install Alcatraz.
Search XBookmark from Window->Package Manager and click Install.
Restart Xcode.
Now, you can see menus about bookmarks in the Edit Menu.
PS : This plugin is open source.

Aptana Studio 3 - code coloring like in Dreamweaver

I'm trying to use Aptana Studio 3 instead of phpEd. But I'd like to have the code coloring like in Dreamweaver. I made these changes in phpEd, but I can't find where to change it in Aptana.
Also, I installed the jquery bundle, but I can't to get it working...
Thanks for your help.
Preferences:Aptana:Themes. Figuring out what keyword corresponds to what display object can be a bit tricky, but it is all there.
There's actually a ticket already filed to add a theme that matches Dreamweaver: https://aptana.lighthouseapp.com/projects/35272/tickets/1508-create-dreamweaver-color-theme
I'm looking at it now, but I'm running into some internal bugs (namely https://aptana.lighthouseapp.com/projects/35272-studio/tickets/2357-scope-selectors-with-portion-prefix-match-arent-matching-properly) that I need to fix before I can finish. In any case it should be in Studio 3.0.2 and hopefully I'll fix it today and it'll be in tomorrow's nightly (here's how to get nightly builds: http://wiki.appcelerator.org/display/tis/Changing+the+Update+Type).
As for editing themes yourself, you can see the current scope at the cursor by doing Commands > Bundle Development > Show Scope. Then use scope selectors that match that sort of scope (we adopt Textmate's scoping/theming rules: http://manual.macromates.com/en/scope_selectors)
Could you finally get your theme?
If you want to create your own theme then first go to: Window->Preferences->Aptana Studio->Themes
To create a new theme just click on the "+" sign next to the themes
list.
To add elements to your new theme right click the text in your
editor and click Commands->Bundle Development->Show scope.
Copy the last section you see to the right of the hint window that
appears.
In the themes elements list click the "+" located at the bottom of
the dialog box (next to "Scope selector")
Give a friendly name to your new element.
Assign foreground/background colors to your new element.
Paste the element's scope in the "Scope selector" input box (make
sure your new element is selected, if not, click on it).
I created a theme for PHP, CSS, HTML, JS and XML editors, similar to the old aptana 2 colors. If you want to get it you can write me to jgarcias.cr at gmail dot com.
Cheers.

Resources