In the Jupyter notebook, I would like to use the regular Ubuntu font when editing markdown cells and UbuntuMono for code cells. I can change the fonts of both these cell types simultaneously by editing .jupyter/custom/custom.css like so:
.CodeMirror pre {
font-family: "Ubuntu Mono", monospace;
font-size: 14pt;
}
I can also change the formatting of the headers in the markdown code cells:
.cm-header {
font-size: 110%;
font-family: "Ubuntu";
}
As well as how the text looks when rendered (after executing a markdown cell):
div.text_cell_render {
font-family: "Ubuntu";
font-size: 12pt;
}
However, I don't understand which css classes I could use to discriminate between code cells and paragragh/body text in markdown cells in edit mode. I tried the object inspector in Firefox, but the input text for both cell types show up with the same span tags and css classes. I have tried many of the combinations listed here, but it seems like I just can't find the right one, any ideas?
I received a reply from the Jupyter Notebook issue linked in the comments of my questions here. It is possible to combine CSS selector, so the following solves my problem:
.text_cell .CodeMirror pre {
font-family: "Ubuntu";
font-size: 12pt;
}
Related
I am trying to edit the font of some text within a testimonial preset carousel within Squarespace (on the home page of the site linked below).
enter image description here
I have successfully changed the text below it using the following code:
enter image description here
section[data-section-id="63c390bd1403971a5efb5e19"]
.user-items-list-item-container p
{
font-family: "Steelfish";
font-size: 31px;
}
However I cannot seem to find a way to change the font of this main text.
I am open to all suggestions and am getting quite desperate as this job has carried on a lot longer than anticipated.
Any help would be greatly appreciated.
https://orb-seahorse-ha47.squarespace.com/
password123
/* attempt at testimonials top text */
section[data-section-id="63c390bd1403971a5efb5e19"]
.user-items-list-carouselslides user-items-list-carouselslides--initialized p
{
font-family: "Steelfish";
font-size: 31px;
}
Tried this unsuccessfully
Also tried h, h1, h2, h3
Unless we do a lot of digging, it looks like the font-size is going to need the dreaded !important. See if this will work for you:
section[data-section-id="63c390bd1403971a5efb5e19"] h2.list-item-content__title {
font-family: "Steelfish";
font-size: 51px!important;
}
I would like to type highlight in jupyter notebook, such as:
How could I highlight as this?
Not sure what the question is about. I think what you're looking for is Markdown sintax, you can just use
The `numpy.array` type provides a handy method, `item`,
inside a markdown cell to get
The differences in appearance from the example you shared are relative to a different engine used for rendering. If you want to obtain a specific style, instated, markdown cells support HTML that allow you to customize the output. For instance using
The <span style='color: #e74c3c; font-family: monospace; background-color: #F7F2F4;'>numpy.array</span> type provides a handy method, <span style='color: #e74c3c; font-family: monospace; background-color: #F7F2F4;'>item</span>,
you will get
Hope this was helpful :)
I suspect this is more of a LESS question and may not be specific to Ant Design other than the way they implemented some of their components is preventing me from overriding or extending the styles.
Specifically, I want to change the font size and weight for the title area of the PageHeader component. Unfortunately, the component's style does not use the LESS variables defined in the default.less theme for these two settings. The source code can be found here: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less
I have no issues changing the color, for instance, or any other variables defined in the theme but I am new to LESS and not sure how to go about overriding the styles defined for an individual component like this. Oh, and I don't want to use inline styles. We use this component in many places in our application, so I want to define the overrides in one place, once and have them be global for the application (like I can do with the theme variables).
So, how do I override the font-weight and font-size styles defined on lines 45 and 46 of the referenced file?
Here an example of how I have done it in my project:
Using .css file
Override the CSS class by .css/.scss and so on:
// Main layout where all antd componets used.
import './MyLayout.css';
/* MyLayout.css */
.ant-tooltip-inner {
background-color: white;
color: black;
}
Here I reversed all tooltips (default are black).
Using Styled-Components
Same like above just as CSS-JS:
const LayoutStyled = styled(Layout)`
height: 100vh;
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ant-layout-sider-light .ant-layout-sider-trigger {
border-right: 1px solid ${HCOLOR.border};
}
`;
Here I overrode all fonts and added the right border to antd sider trigger (default no border).
Conclusion
Find the css-class / css-property with dev-tools (Ctrl+Shift+C in Chrome) and override it as you like.
Use less files to apply the styling as mentioned in the antd docs here.
I want to change the font type in Markdown cells when I am editing them.
How Can I do that?
I can edit the file .jupyter/custom/custom.css and change the font when they are "run":
div.text_cell_render {
font-family: 'Linux Libertine O';
font-size: 12pt;
}
As shown in the figure, the upper half is a Markdown cell in edit mode, and that is the place where I want to change the font.
A simple possibility is
from IPython.display import HTML, display
display(HTML('<style>.CodeMirror{font-family:whatever}</style>')
but beware that the code above changes also the fonts used for
editing cells of code
rendered code cells
Also note, that my simple proposal works on a notebook by notebook base, you have to add the lines to every notebook you want to modify. On the contrary, if you have a custom.css file where it can be accessed by jupiter during startup you can add the font-family:whatever to it, to make the customization hold for every notebook that you are using.
For an example of permanent customization please have a look at this question from Joel Ostblom — in a nutshell, edit ~/.jupyter/custom/custom.css and put in it
.CodeMirror pre {
font-family: "Ubuntu Mono", monospace;
font-size: 14pt;
...
}
I have a task to create a randomize crossword puzzle 10x10 or 12x12, and I am wondering how do I start. Lets say I want grab a number of words from MySQL 2008 database. Example: dogs, cats.
I have created the table but I just need to know how to customize the code by using css in cshtml any help?
I have a <table id="crossword" >
How do I input this set of CSS codes in razor cshtml?
#crossword {
color: #444;
font-family: arial, sans-serif;
font-size: 18px;
}
http://jsfiddle.net/4XV3z/4/