What code is needed in Google Colab to change the Markdown font style from its default? E.g., I would like to change it to Times New Roman.
In Jupyter Notebook, the following code works:
## <span style='font-family:Times New Roman'> Hello World </span>
However, this code does not work when I try it in Google Colab, but instead creates the text with the default Colab Markdown font style.
This does not fully answer your question because it does not use markdown but basically does what you want in your example:
you can use the HTML module from IPython.display and run html as code in your cell
from IPython.display import HTML
HTML("<h2><span style='font-family:Times New Roman'> Hello World </span></h2>")
output:
I'm not very familiar with the Colab system but most markdowns doesn't support changing the font family. I would recommend using a form of HTML page that supports CSS to change the font.
Hope that helps!
~ Ryan
The only way I've found to change font on Colab is to change the attribute "face" of the tag "font". For example:
<font face="Rage" size=7 color='#d39aed'> Hello <font>
(note that the font face attribute is not supported by HTML5).
Hope that helps!
Related
I am using Markdown in a CMS but am having a problem.
In my style.css file I have the following:
.smallCapsB {font-variant:small-caps;font-weight: bold;}
And I am using the following format.
<li>"May they know that Your name, Yours alone, is the <span class="smallCapsB">Lord</span>, supreme over all the earth." (Tanakh)</li>
While the small-caps portion works, it ignores the font-weight. How can I make it bold?
I have a GatsbyJS website that uses NetlifyCMS. I restyled the images on my website to be centered. The issue i've found now is that all the emojis in the blog posts are now also in a new line and centered in the posts and it doesn't look good at all.
Is there anyway to style the img and emojis seperately? I am aware that emojis show up on the markdown file as images.
I have attached images of how the emojis look in the blog posts, the markdown file and the styling file.
Any solutions would be appreciated <3
That's because you are using images.
In markdown the syntax
will be rendered to html as
<img src='y' alt='x'>
So, the solution is either using plain emoji as #ando-andriamalala suggested.
Or, if you really need to use image (I'm guessing for display consistency?), you can, assuming you only use this domain for your emoji needs:
.Content img[src*="https://static.xx.fbcdn.net"] {
...
}
see MDN CSS: Attribute selectors for details
Try to use copy and past emoji instead of image 😆
here a link https://getemoji.com/
I'm creating a simple Vue app that I will use to generate my CV in a PDF format. I have added google font Montserrat into this project, and when I print this page to file (CTRL + P in Firefox), the text cannot be selected, its like everything is an image.
I started debugging and it seems to happen when I use an imported font. Here is a codepen that can demonstrate what happens https://codepen.io/phlame-/pen/NWNYbyb
How to replicate: Open the pen in Firefox, and print the page to file (CTRL + P). Save and open the file. The second paragraph is selectable as its Arial, but the first one is not (which is Montserrat).
It seems like if you try to do this in Chrome nothing is selectable, but I would like it to work at least in 1 browser - since only I will use it to generate PDFs.
I've tried to import the font through a link tag instead of #import in CSS, tried this answer, tried different Google fonts (Roboto and Lato), this:
#media print {
* {
user-select: text !important;
}
}
All producing same results - unselectable text. Which becomes selectable with a default font...
To be clear: the font renders in the PDF, everything looks as it should, but the text is NOT selectable when clicking and dragging over the text
Has anyone had experience with this? Any help is appreciated
I ran into the same thing once using Overlock on a resume page. The problem is that the browser print utility doesn't recognize fonts that your page downloads on the fly using link tags, as it is customary to do with google fonts. It can only recognize system fonts, meaning the ones you have installed on the machine you're running the Print from.
If some text on your web page is using a font that isn't on your installed system font list, then you won't be able to save it as text in your PDF file. When the print utility encounters such, it treats it as an image.
Different OSes have different ways of examining what fonts you have on your machine ("Font Manager" in Windows, "Font Book" in Mac OS). You can google how to see what fonts you have installed on your machine, and you should find that Montserrat isn't one of them.
To fix this, all you need to do is install the Montserrat google font on your machine. Here is one set of directions on how to do that. Once you've done that, you'll need to restart your browser.
I downloaded a free css theme and this theme uses css file and font files for icons and unfortunately the theme has no documentation. How can I visually export them to an html file instead of looking at the CSS file line by line?
https://yadi.sk/d/K1fgjd61wWCy8Q
https://yadi.sk/d/j3tjDtwa3Gucng
https://yadi.sk/d/QCi26iPmPE5QIA
https://yadi.sk/d/POI-p5eOsmQArQ
https://yadi.sk/d/tKJY9lGomWsqmg
It was obviously created through icomoon, but I want to see visually which icons are there.
Just to clarify, you wanted to have a preview of the icons, right? That's why you're asking to convert it to HTML to easily view in the browser. If so, I hope this would do:
With the use of your .SVG file (https://yadi.sk/d/tKJY9lGomWsqmg), you can upload this to https://icomoon.io/. There, you can have a preview of the available icons with their corresponding names.
IcoMoon App has a feature of converting .SVG to icons. And with that, it also offers to have a preview of the icons with their names.
I tried opening the .SVG on itself, but (I'm not an expert here) I didn't get to have a preview of the icons.
I hope that helps.
I’m looking to hide sensitive information from a webpage when printing to PDF.
I use a media="print" stylesheet with quite a lot of display:none to do so because I can’t edit the webpage directly.
When using a PDF printer such as "Microsoft Print to PDF", is any of the data hidden by the stylesheet embedded somewhere inside the resulting PDF file?
Short answer: Elements that are set to display: none are neither visible or in any form inside a the resulting PDF.
Longer answer:
Usually I would say it is hidden completely - like form elements that are set to display: none are completely ignored. But since I wasn't sure I did the following to test it:
I created a testpage with the only HTML <div>Hello <span style="display: none">world</span></div> inside and printed it to PDF.
I opened the resulting PDF in Illustrator and inspected the layers. No such sign of the word world.
I tested this on a Mac (Chrome) and on Windows (Edge and IE11)