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.
Related
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 know that I can click on File -> Print Preview and let my browser save the result as a PDF. But that PDF will contain quite a bit of code.
Can I hide parts from the print preview or make a PDF with another tool?
Ideally, there would be magic functions:
%hide: Hide the cell and its output
%hide-code: Hide only the code of the cell, but show the output of the code
Print to PDF in the browser
In JupyterLab, you can hide the cell's input and output by clicking the side bar as demonstrated in the doc. After hiding, you can use the browser's printing menu to generate a PDF. I've tested it on FireFox and expect similar result on Chrome or Edge.
Export to PDF with nbconvert
If you aim at a native conversion from ipynb format to pdf, the nice old nbconvert tool is your friend. It usually comes together with Jupyter and can be invoked conveniently in the menu of JupyterLab File->Export Notebook As...->PDF or, in the classic Jupyter Notebook interface, File->Download as->PDF (via LaTeX).
Hiding input/output in cells can be realized by setting the cell's metadata hide_input=true and installing a nbextension as discussed in issue #155.
Print Preview menu in the classical Jupyter
Finally to your question
Can I hide parts from the print preview or make a PDF with another tool?
The "print preview" button in the classical Jupyter interface is a shortcut for calling nbconvert to generate a HTML file and redirect your browser to it. Therefore, similar configuration for nbconvert to hide input as discussed above (in issue #155) can be used. This feature is implemented by jupyter_contrib_nbextensions bundle and explained in the doc.
As the above-mentioned answers do not work for me; I found another solution:
I use an additional package notebook-as-pdf.
Read the tutorial here. It uses Chromium and is the only approach that worked for me so far reliably. The "print preview" does still not work. But it produces a clean PDF with no code input.
I do:
pip install -U notebook-as-pdf
pyppeteer-install
jupyter nbconvert --to PDFviaHTML --TemplateExporter.exclude_input=True PATH_TO_YOUR_FILE.ipynb
What did NOT work for me:
The solution above.
All the scripts mentioned in those answers
I'd like to know if there is any way to activate auto indent a CSS file in visual studio code with the shortcut ALT+SHIFT+F?
It's working fine with JavaScript but strangely not with CSS.
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.
Beautify css/sass/scss/less
to run this
enter alt+shift+f
or
press F1 or ctrl+shift+p
and then enter beautify ..
an another one - JS-CSS-HTML Formatter
i think both this extension uses js-beautify internally
Wasted an hour finding the best option.
Just putting it together, for easy reading and choosing one them.
Notes:
CSS and SASS/SCSS/LESS are all related
HTML, Javascript, Typescript, JSON - VS code is already formatting
CSS and related - VS code is not formatting as of today
Options:
To format css/sass/scss/less:
Prettier
All css related supported, and not others, I choose this, it works great.
To format JavaScript/TypeScript/CSS:
Beautify css/sass/scss/less
but, already JS, TS are supported by VS code
To format JS, CSS, HTML, JSON file (wraps js-beautify)
JS-CSS-HTML Formatter
but, already JS, HTML, JSON are supported by VS code
To format CSS
CSS Formatter
but, only CSS supported, not all the related - not maintained 6+ months
To format:
Press Alt + Shift + F in VS Code, after installing Prettier.
I recommend using Prettier as it's very extensible but still works perfectly out of the box:
1. CMD + Shift + P -> Format Document
or
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
EDIT: Prettier has become vastly more popular and standardized since I first posted this answer. It has gone so far as to even be used directly in the build flows of most modern frontend projects. I strongly encourage users looking to format their code use the Prettier VSCode extension, which tries to use the same settings configured by said build flows.
After opening local bootstrap.min.css in visual studio code, it looked unindented.
Tried the commad ALT+Shift+F but in vain.
Then installed
CSS Formatter extension.
Reloaded it and ALT+Shift+F indented my CSS file with charm.
Bingo !!!
There are several to pick from in the gallery but the one I'm using, which offers considerable level of configurability still remaining unobtrusive to the rest of the settings is Beautify by Michele Melluso. It works on both CSS and SCSS and lets you indent 3 spaces keeping the rest of the code at 2 spaces, which is nice.
You can snatch it from GitHub and adapt it yourself, should you feel like it too.
Maybe a little bit late to the party but this might help users using prettier. Just add this line to the setting.json file.
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Save and all should be good now
Go to Files menu -> Preference -> Extentions
Then type CSS Formatter wait for it to load and click install
Install HookyQR.beautify extension. It will beautify your javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. It is the most use extensions for this purpose
Beautify (Github) & Prettier (Github) are the best plugin for web development in Visual Studio Code.
To format the code in Visual Studio when you want, press:
(Ctrl + K) & (Ctrl + F)
The auto formatting rules can be found and changed in:
Tools/Options --> (Left sidebar): Text Editor / CSS (or whatever other language you want to change)
For the CSS language the options are unfortunately very limited.
You can also make some changes in: .../ Text Editor / All Languages
so I am adoring the new IPython notebook slideshow feature, however I could not figure out how to distribute such a slideshow in a userfriendly (I am no HTML/JS guy) way.
My usecase is:
I have a somewhat messy notebook which I want to filter by tagging cells as slides/skip/- etc.
In an optimal world there would be a fire-and-forget 'give me a pdf' button somewhere.
So I did already view the slides locally via ipython nbconvert ... --to slides -- post serve
But how do I distribute that to others? Can I get a pdf from such a slideshow easily (I do not care about transition animations etc.)
I hope this is developed further, great features so far!
Currently, there is only a hackish way, see GitHub Issue.
You might also try Slideviewer (in contrast to NBviewer).
$ ipython nbconvert ... --to slides (no serve option necessary) create a standalone html file you should be able to mail, or whatever.
The skip/- logic can be applied to pdf generation too, you just have to write your own extended template (which is not that hard, wild guess ~20 lines)
You can print it as a pdf file from Chrome.
Add "?print-pdf" at the end of your URL.e.g: 127.0.0.1:8000/index.html?print-pdf
Select print menu from Chrome.
Select Save As pdf, then print it out.
buddy, I'm sure this is what you want
https://github.com/damianavila/RISE
for more details, check here
https://conference.scipy.org/scipy2014/schedule/presentation/1718/
I'm trying out Pandoc on OS X, and results thus far are impressive. One blocking problem, however, is getting CSS styles to work on inline code samples. I'm converting from Markdown to PDF.
I have this string in my source:
* Create a simple HTML document (<span class="filename">simple.html</span>) and load it into the browser via the file system
I've also tried this:
* Create a simple HTML document (`simple.html`{.filename}) and load it into the browser via the file system
I'd like to apply the class "filename" to the enclosed text in each case, but it doesn't seem to do anything to the output. However the manual says:
Some output formats can use this information to do syntax highlighting. Currently, the only output formats that uses this information are HTML and LaTeX.
Here's my command:
pandoc \
--output ./output.pdf \
--css source/styles.css \
source/en/docs/input.md
I'm converting to PDF, which is written by LaTeX by Pandoc internally. Can I get this to work? Or, can I use a style defined using a LaTeX command? - it doesn't have to be CSS. However, it must be a style system - it's not workable to change italic/font/colour attributes on each occasion.
I've tried sending output temporarily to HTML, and in that situation the styles are imported directly from the specific style asset. So, my stylesheet specification and span markup is correct, at least for one output format.
Addenda
A couple of afterthoughts:
The solution does not have to be Pandoc or Markdown. However, it does need to be a trivial text-based markup language that can convert reliably to PDF, as I want to store the document files on Git for easy forking and merging. I'm not keen on HTML as it is verbose, and engines to convert it aren't that great (though, admittedly, my formatting requirements are modest).
The HTML output from Pandoc is fine, so if I can find something that converts the (simple) HTML/CSS to PDF reliably, I'll be fine. Of course, Pandoc should be able to do this, but inline styles (for the background colour on code fragments) aren't rendered. This might be a faff, as I'll have to reintroduce things like page-breaks, which can be non-trivial in HTML-to-PDF converters.
"I'd like to apply the class "filename" to the enclosed text in each case, but it doesn't seem to do anything to the output."
It works for HTML. Running Pandoc interactively, ^D to see the resulting code:
$> pandoc -f markdown -t html
* Create a simple HTML document (`simple.html`{.filename}) and load it.
^D
<ul>
<li>Create a simple HTML document (<code class="filename">simple.html</code>) and load it.</li>
</ul>
It doesn't work for LaTeX if you use the .filename class. You need to use one of the known classnames:
$> pandoc -f markdown -t latex
* Create a simple HTML document (`simple.html`{.filename}) and load it.
^D
\begin{itemize}
\tightlist
\item
Create a simple HTML document (\texttt{simple.html}) and load it.
\end{itemize}
Now using one of the known classnames, like .bash, .postscript, .php, ...:
$> pandoc -f markdown -t latex
* Create a simple HTML document (`simple.html`{.bash}) and load it.
^D
\begin{itemize}
\tightlist
\item
Create a simple HTML document (\VERB|\KeywordTok{simple.html}| and
load it.
\end{itemize}
To convert HTML + CSS into PDF, you can also look into PrinceXML, which is free for non-commercial use.
I don't know LaTeX at all, but have hacked this solution using this helpful manual. First, create a style:
\definecolor{silver}{RGB}{230,230,230}
\newcommand{\inlinecodeblock}[1]{
\colorbox{silver}{
\texttt{#1}
}
}
And here's how to use it:
Some \inlinecodeblock{inline code}, and some widgets, go here
This creates a style with a background colour and a monospaced font. The margin and padding are a bit large for my preferences, but it's a very useable start. Here's what it looks like:
The disadvantage is that if I wish to output to a format that supports styles proper (such as HTML) then these are lost. Also, my solution only works with LaTeX/PDF. Thus, if you can fix these issues, please add a better answer!
Addendum: I have a better approach, which is thus:
\newcommand{\inlinecodeblock}[1]{
\fboxsep 1pt
\fboxrule 0pt
\colorbox{silver}{\strut{\texttt{#1}}}
}
This avoids the problem of excess horizontal padding - I think it was the line break in the colorbox parameter that did it. I've added in strut, which keeps highlights the same height regardless of whether the text has descenders.
It's not perfect though - there's still too much horizontal margin outside the box, and a comma after a box will still orphan onto the next line. I may give up with LaTeX, and render to HTML from Pandoc, and then use wkhtmltopdf to render the final document.