I am writing some github markdown with VS Code and while it has a preview, I would like to view it in my default Chrome browser so I can debug my css settings with inspect - however without checking it into github and browsing there (which slows things down a lot).
As far as I can tell from the docs VS Code Markdown Doc, the markdown preview window has no such debugging capabilities.
Is there anyway to get the markdown preview to display in the default browser instead of its own preview window.
According to VS Code's documentation Extending the Markdown preview, defining the CSS under VS Code's Workspace Settings should show the correct output in VS Code's preview.
// Place your settings in this file to overwrite default and user settings.
{
"markdown.styles": [
"Style.css"
]
}
Related
Is there some VScode extension that allows image size control in this form?
{ width=whatever }
That is the form that is used to get Pandoc to control image size in its output. In this case I'd like to use VSCode - one of my favorite tools - to compose markdown destined for docx output. I've got the Pandoc part working, I'd just like be able to get the previewing to work better in VScode. There might be an extension that does this, but there are zillions of markdown extension for VSCode so who knows.
An alternative would be if there custom css code that would do this, but my css knowledge is not sufficient to know if this is even possible.
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?
I am trying to add a link to my RMarkdown document (using a flexdashboard), and am aware of the [Website Name](URL) method, however in my particular case, the webpage can only be opened in Internet Explorer, and so I want to override my default browser, Chrome.
I have been playing in the console, and have had success with the browseURL function, which allows me to specify a file path for the browser to use: browseURL("http://URL", browser = "c:/Program Files/Internet Explorer/iexplore.exe")
My question is, how do I use this function within RMarkdown. I'd like a hyperlink to show up in my rmarkdown HTML page, where the link says "Website Name" and when you click the link, it executes the browseURL function and automatically opens Internet Explorer.
I haven't been able to figure out how to get a link to show up in my rmarkdown output that executes browseURL. Thanks for your help!
I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
If from the RStudio menu, I select File > New File > R Markdown ...
and then select Presentation, HTML (Slidy).
Leaving the sample code and pressing Knit HTML, opens the presentation in presentation mode in an RStudio browser (after saving). However, if I then select Open in Browser the presentation shows as one page and pressing "a" to change to slide show mode does not work (tested with Chrome and IE)
This same behaviour does not occur if I choose HTML (ioslides), i.e. ioslides works as expected.
Is anyone else able to replicate this problem? Any ideas? Apparently javascript is enabled...