When I go to print markdown from VSCode it does render the markdown, but it has a very different styling than the on-screen preview. How do I fix this?
VS Code does not support the printing of markdown or anything else. For that you need a printing extension. There are only two of these, and I wrote the one that prints rendered markdown. I'm quite certain you're talking about mine because it has a Markdown: Styles setting and the other one doesn't.
There are settings that allow you to customise styling. It's not currently styled using a stylesheet because there are complications referencing that sort of asset in remoting environments.
To work around this I had to embed styles into the document. This has the unfortunate effect that you cannot override them with a separate CSS file. As a temporary measure, I have made available settings allowing you to customise the embedded styles.
I notice in the screen snap that I have specified "Blackadder ITC" as the font-family. This is not a typeface I would recommend, probably I was giving a demo. I sincerely hope this wasn't in shipped setting defaults. If that's why you think it's "ugly" then change the heading font-family to whatever typeface you prefer for headings. sans-serif will use the local default.
Related
im trying to make wider spaces between HTML parent and child elements. I tried with many settings but my tree is still super unreadable. I can't see what exactly each div contains.
The current look:
I'm trying to achieve wider structure, like this one:
"editor.tabSize": 2,
You're using a variable-width font. Spaces in variable-width fonts are often much thinner than other glyphs/characters. The image of what you want is using a monospace font (where every glyph/character has the same width). Use the editor.fontFamily setting in the settings.json file. You'll need to consult your OS / Desktop environment to see what fonts you have installed for selection. If there's one you want and don't have, you'll need to install it.
The border around the code tag is annoying, especially if there are many of code tags inside a paragraph. Can I remove it in the VScode editor?
Well, the reason is I installed the markdown all in one extension and the border was hardcoded for the dark theme.
There is a issue talking about the problem and how to tweak it from code.
But for me, the built-in markdown support of VScode just work well.
I was looking for a better code editor for my projects and wanted to give VSCode a try. But I couldn't find where to customize the syntax highlighting settings. What I actually need is to change the background color of embedded languages within a file so that I can identify different parts of the code a lot easier.
I have this PHP file which contains, HTML, CSS and JavaScript and I'd like to set different background colors for all 4 languages within this single file. Is this possible with VSCode? or does anyone know a code editor that supports this? UltraEdit supports this but it has so many other shortcomings.
Not possible #3429 Themes don't support background styling
My text rendering in VSCode is blurry and I want to make it like my Atom text editor. In atom, the text rendering can be improved by controling -webkit-text-stroke and -webkit-font-smoothing property.
I wanted to know how to change these properties in VSCode.
VS Code does not expose direct css styling like Atom does
Support for configuring text-stroke is tracked here
You can also try the workbench.fontAliasing setting.
Is there a plugin to allow users to create <code/> or <pre/> blocks?
If I pass in some html that includes <code> </code> blocks the contents shows up, but with no visual indication that it is different from any other text. Thats inconvenient, but I can't seem to find a way that a user could select a block of code they typed that they want to appear literally and click a button to indicate that.
I'm still pretty new to the CKEditor, but I know Telerik has a pretty graceful implementation of this. (just click the upper right toolbar button titled "Format Code Block").
Does this editor support that? Are their any plugins that add this functionality?
As for pre-elements, there is this plugin by wwalc: http://ckeditor.com/addon/insertpre
It is also available in GitHub: https://github.com/wwalc/insertpre
The only issue is that it hasn't been updated in a while - It officially only supports CKE up to version 4.1 - so there might be some ACF problems at least. You can search for alternatives at http://ckeditor.com/addons/plugins/all using keywords like code and pre, this will always show the most up to date results.
For code blocks you can also use the Text Formats feature - by default it is available in the Standard and Full presets, though you can also add it to your custom build.
When the Format plugin is enabled, it adds the Format drop-down list to your toolbar. Check the Formatted text format - it wraps the active text block with <pre> tags. Note that it works on block-level, so you don't even need to perform any text selection. However, this also means it's not appropriate for inline formatting.
You can also add some custom styling to the Formatted format by adjusting the config.format_pre definition. See the Applying Block-Level Text Formats sample for demos of both the default implementation and custom format definition (scroll down the sample page to get the complete source code for both solutions).
As for inline code formatting, the Styles drop-down list contains the inline Computer Code style that wraps a text selection with <code> tags. Likewise, you can (and actually should) customize the styling that is applied with this feature.
Additionally, for some really fancy code formatting, see the optional Code Snippet plugin. It lets you insert code snippets with syntax highlighting into the editor. These snippets look great (you can also choose a theme that you like) and since they are implemented as widgets, they have all advantages of CKEditor widgets: a code snippet is treated as a single entity inside the editor, you can select it as a whole, delete, change its position with drag&drop etc. See the documentation and sample for more information and examples.