I know how to use markdown-styles in settings to supply my own CSS for styling Markdown previews, but I don't know what elements and CSS classes to style. Are the ones used in Markdown preview documented somewhere?
Open a Markdown file.
Open the split preview window (Cmd + K, V on Mac, or the split view icon in the upper right-hand corner of the window, or open the command palette (menu View → Command Palette or Shift + Cmd + P on Mac) and run Markdown: open Preview to the side.
Open the command palette and run Developer: Open WEBVIEW developer tools.
That will open a browser-like inspector, and you can drill down and see whatever you need there.
Note that Toggle Developer Tools in the Help menu does not work for this — it does not drill down into the Preview's webview window.
You can use vr8ce’s helpful answer to find the source of the default stylesheet. On the Mac, this is the path:
/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/markdown-language-features/media/markdown.css
Related
I installed the 'Image and 3D model editors' component, but when I click on a .png (icon) file from my Xamarin Forms solution, I get this pop up error:
There is no editor available for
'C:\Users\...\MySolution\MyProject.Android\Resources\mipmap-xxxhdpi\launcher_foreground.png'.
Make sure the application for the file type (.png) is installed.
Do I also have to enable the component somewhere? What am I missing here?
EDIT: If I right click on the image and 'Open With...', then I get these options:
The first (Default) option would give me this:
Try to right click your image file,and select Open With... -> Graphics Designers.
Then you will open the image with the Image Editor.
Using Eclipse 2020-09 (i.e. v. 4.17) IDE for Java (on Linux, openSUSE Tumbleweed), with version 3.0.38 of Mylyn WikiText plugin installed, I had the following difficulty: Although pretty much all editor/ui fonts were fine, the HTML preview of WikiText files (in particular README.md!) displayed in unreadably small fonts (my display has a very small pixel pitch). So I wanted to find a way to set the CSS of such preview pages. The Mylyn WikiText docs (at https://help.eclipse.org/2020-09/index.jsp?topic=%2Forg.eclipse.mylyn.wikitext.help.ui%2Fhelp%2FMylyn+WikiText+User+Guide.html, under the heading "Rendering Appearance") says that there should be a Preferences screen General > Editors > Text Editor > WikiText > Appearance that allows one to set this CSS. However, no such screen shows up in my installation.
The only method I was able to find for fixing this was to use an application (such as Engrampa) which is able to edit the contents of .jar files, and in my eclipse installation directory, use it on plugins/org.eclipse.mylyn.wikitext.ui_3.0.[SPECIFIC_VERSION_HERE].jar to edit the internal component org/eclipse/mylyn/internal/wikitext/ui/viewer/default.css -- I could change any css there, and upon restarting Eclipse, the changes would take effect.
However, clearly any changes I make this way will be blown away upon the next update of Eclipse or of Mylyn Wikitext. Does anyone know of a better way to set the size of the preview text? Was that Appearance pane mentioned in the docs removed? If so, what replaced it? If not, any ideas why I might not be seeing it?
VS code recently added the ability to work with jupyter notebooks (.ipynb files), this is to say it renders them as notebooks and not the underlying text.
The problem I'm running into is I want to make some edits on the raw text rather than the "notebook" but I can't figure out how to show it as a text file the way any other editor would.
Is there a way to toggle between the views?
Disable automatically opening *.ipynb files in Notebook Editor
To make sure the Jupyter notebooks don't open in the Notebook Editor automatically, make sure to disable this settings. (Command Palette -> Settings)
OR
In the User or Workspace settings.json, add the following the root json - "jupyter.useNotebookEditor": false
To toggle between the Notebook Editor and Raw Text Mode Editing
There is an option/command called Reopen Editor with..., which will provide you options to open the *.ipynb file in text mode.
You trigger this by performing a Right Click on the Editor Tab (Editor Title Bar) or Command Palette -> Reopen Editor with...
PS: I have the Jupyter extension (v2020.12.414227025)
Open: File > Preferences > Settings
Search ipynb and deselect the following:
Other answers didn't work for me recently. I found no "use notebook editor" option under preferences, perhaps vs code has reorganized recently. Instead I found the following solution. Right click on an *.ipynb file tab to get the context menu, and click "Reopen Editor With..." as pictured below.
Then on the following popup click "configure default editor for .ipynb", and then click on the text editor as seen below:
And viola. The default settings have been changed.
I think the fastest way is to rename the file.
Just press F2 (or return for mac) while selecting the file in the vscode explorer, then rename from my-notebook.ipynb to my-notebook.json, because jupyter ipynb files are regular json files
Create .json file and paste the notebook json in there, save the file and then rename the extension to .ipynb and it will open in the jupyter editor
(Similar to aquirdturtle's answer)
What about
On the left side explorer
Right Click on file -> Open With -> Text Editor
Set the setting
"files.associations": {
"*.ipynb": "text"
}
Or try click on the Status Bar field that shows the Language Mode of the file in the lower right.
Use the command: Change Language Mode
Do we have 'Launch in Chrome' equivalent in Atom. Screen shot of a similar functionality in Notepad++ is below:
There are several packages for Atom. E.g.
https://atom.io/packages/open-in-browser
opens a file in the default browser
https://atom.io/packages/open-in-browsers
a more configurable package where you can choose a browser
just to mention two of them, there are several more if you search the Atom packages site.
The easiest way that I have figured out how to open a file in your browser, is to right click the file that you desire to open on the left hand side of Atom, and click "Copy full path".
After you do that, just paste the full path into whichever browser you're using, and then you have your file opened in the browser.
This is the easiest way that I have found to do it. The packages seem to not want to work well for me.
I'm using ST3 and trying to create a snippet to quickly output the first child selector. I have saved the file with a .sublime-snippet extension in the Packages/User location. My snippet code:
<snippet>
<content><![CDATA[
:first-child {}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>first</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css</scope>
<description>first-child</description>
</snippet>
So when I type div and then the tabTrigger text, the new snippet does not appear in a list or when I press the Tab key. What do I have to do to get it working?
( Note: I've noticed that it works only inside curly braces but this is useless as it needs to work for the CSS selectors which are outside the braces! )
Unfortunately, you can’t easily combine ST and Emmet snippets in CSS due to some technical problems. As a workaround, you can create snippets right in Emmet:
http://docs.emmet.io/customization/snippets/
https://github.com/sergeche/emmet-sublime#extensions-support
There is a way and it is as follows (using a Mac with OS X):
1) Download and install Package Resource Viewer
2) Open the Command Palette within ST3 (accessed typing Command+Shift+P in Mac, or Ctrl+Shift+P in Windows)
3) Type PackageResourceViewer: Extract Package
4) Select the CSS option
5) Now in the menu go to Sublime Text / Preferences / Browse Packages (a folder window will pop up)
6) Go to the CSS folder within the Packages folder
7) Select the file named Completion Rules.tmPreferences and drag it to ST3 so that it opens it
8) One line says <string>source.css meta.selector</string>. What you have to do is to delete source.css meta.selector, so that you now have <string></string>
9) Save
10) Quit ST3 and re-open it
Now you are done and your snippet should work.
I was having a similar issue where Sublime Text 3 was not expanding my snippets in CSS, they would work with a tab inside Sass or Scss files, but not CSS. They would expand, however, by pressing Ctrl+Space (on Mac)
The above answer, updating the CSS package, broke my intelliSense (autocomplete no longer worked)
However leaving <string>source.css</string> and simply removing meta.selector fixed both issues for me