change fontfamily for output cells in jupyterlab - jupyter-lab

I would like to change the default fontFamily for all cells in jupyterlab. I was able to edit the configuration in Advanced Settings Editor for code, markdown and raw cells. But the output cells still use the default SourceCodePro font. Is there a way to change that too?

Apparently this feature is not implemented yet. See here: https://github.com/jupyterlab/jupyterlab/issues/5764
I got around this by first installing the extension jupyterlab-fonts and then changing the --jp-code-font-family parameter in the file ~/.jupyter/lab/user-settings/#deathbeds/jupyterlab-fonts/fonts.jupyterlab-settings to this:
{
// Fonts
// #deathbeds/jupyterlab-fonts:fonts
// Settings for JupyterLab Fonts
// *********************************
// Global Styles
// JSS-compatible JSON applied to the Global scope
"styles": {
":root": {
"--jp-code-font-family": "monospace"
}
}
}

In the jupyterlab open settings > Theme, on the overides change code-font-family
{
"overrides": {
"code-font-family": "monospace",
"code-font-size": "13px"
}
}

Related

Cypress: Custom command to read style of element failing

I'm using cypress 10 and cucumber (https://www.npmjs.com/package/#badeball/cypress-cucumber-preprocessor). As a result a lot of similar questions/tutorials are not helpful as the file structure has change (no index.js in my support file for example).
My brain feels like a bunch of melted crayons, can someone look this over and tell me why my custom command isn't working?
Essentially I'm trying to create a custom command (accountMenuControl) that determines if a sliding menu (accountMenuDiv) is open or closed and then reacts or doesn't react depending on the situation. Sometimes I need it opened to select something from it. Sometimes I need it closed because it's obscuring something.
So again, ideally, I want to be able to just put in cy.accountMenuControl(open) and have it check if it's currently opened/closed and act accordingly.
The only way I've found to detect if it's open or closed is based on the style attribute (display: none is closed, display: block is open).
I'm very new to cypress so i'm sure i've got something obvious wrong.
This is in the pre-generated support/commands.js file
const accountMenuDiv = cy.xpath('//*[#id="sidebar"]/div[2]');
const accountMenuSwitch = cy.xpath('//*[#id="sidebar"]/div[1]/h3/i');
cy.get(accountMenuSwitch).then(() => {
if (desiredPosition = open) {
if (accountMenuDiv.should('have.style', 'display: block')) {
cy.wait(2000)
} else {
accountMenuSwitch.click()
cy.log("ACCOUNT MENU FOUND TO BE CLOSED - OPENING")
cy.wait(20000)
}
} else {
if (accountMenuDiv.should('have.style', 'display: none')) {
cy.wait(2000)
} else {
accountMenuSwitch.click()
cy.log("ACCOUNT MENU FOUND TO BE OPENED - CLOSING")
cy.wait(20000)
}
}
})
})
package.json
{
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "latest",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
"cypress": "^10.6.0",
"cypress-xpath": "^2.0.1",
"esbuild": "^0.15.5"
},
"cypress-cucumber-preprocessor": {
"json": {
"enabled": true
}
}
}
I'm getting 'shouldhave.style, display: block' and 'The chainer style was not found. Could not build assertion.' from cypress

How to make a PDF using bookdown including SVG images

I have some R markdown that includes the following code:
```{r huff51, fig.show='hold', fig.cap='Design decisions connecting research purpose and outcomes [#huff_2009_designingresearchpublication p. 86].', echo=FALSE}
knitr::include_graphics('images/Huff-2009-fig5.1.svg')
```
When using bookdown to produce HTML output everything works as expected.
When using bookdown to produce PDF output I get an error saying ! LaTeX Error: Unknown graphics extension: .svg.
This is understandable as knitr uses Latex's \includegraphics{images/Huff-2009-fig5.1.svg} to include the image. So, it's not a bug per se.
Is there a better way to include the SVG image so I don't need to pre-process it into, say, a PDF or PNG?
An update to Yihui Xie 's answer in '22. The package you want is now rsvg and the code looks like:
show_fig <- function(f)
{if (knitr::is_latex_output())
{
output = xfun::with_ext(f, 'pdf')
rsvg::rsvg_pdf(xfun::with_ext(f,'svg'), file=output)
} else {
output = xfun::with_ext(f, 'svg')
}
knitr::include_graphics(output)
}
Then you can add inline code to your text with
`r show_fig("image_file_name_no_extension")`
knitr v 1.39, rsvg v 2.3.1
You can create a helper function to convert SVG to PDF. For example, if you have the system package rsvg-convert installed, you may use this function to include SVG graphics:
include_svg = function(path) {
if (knitr::is_latex_output()) {
output = xfun::with_ext(path, 'pdf')
# you can compare the timestamp of pdf against svg to avoid conversion if necessary
system2('rsvg-convert', c('-f', 'pdf', '-a', '-o', shQuote(c(output, path))))
} else {
output = path
}
knitr::include_graphics(output)
}
You may also consider R packages like magick (which is based on ImageMagick) to convert SVG to PDF.
For bookdown, I really don't like having PDF files on my websites. So I use this code:
if (knitr::is_html_output()) {
structure("images/01-02.svg", class = c("knit_image_paths", "knit_asis"))
} else {
# do something for PDF, e.g. an actual PDF file if you have one,
# or even use Yihui's code in the other answer
knitr::include_graphics("images/01-02.pdf")
}
It uses the SVG file for websites (i.e., HTML output).
It works perfectly for generating everything: website, gitbook, pdfbook and epub.
To prevent adding this code to every chunk in your bookdown project, add this to index.Rmd:
insert_graphic <- function(path, ...) {
if (knitr::is_html_output() && grepl("[.]svg$", basename(path), ignore.case = TRUE)) {
structure(path, class = c("knit_image_paths", "knit_asis"))
} else {
knitr::include_graphics(path, ...)
}
}

FolderNameEditor not working with PropertyGrid

When using FolderNameEditor in my settings class, I cannot get it to display the ellipsis so I can change the folder. The code for my property is below.
Is there another attribute that I need? Change a setting on an existing attribute? Is there an alternative to FolderNameEditor, other than writing my own editor?
[Category("Schedule")]
[DisplayName("File Path")]
[Editor(typeof(FolderNameEditor), typeof(UITypeEditor))]
[ExpandableObject]
[UserScopedSetting()]
[DefaultSettingValue(#"c:\temp")]
public string ScheduleFilePath
{
get { return _scheduleFilePath; }
set { _scheduleFilePath = value; }
}
My settings class inherits from ApplicationSettingsBase. I have many other properties (fonts and colors) in my settings class and they work fine.
Specifying the FolderNameEditor seems to have no effect, I am only allowed to edit the property as a string. I tried the ExpandableObject property, but it just displays the length of the string.
Is there a decent alternative to PropertyGrid? I seem to spend an inordinate amount of time getting it to work.

Changing anyMatch default for Filter.JS in ExtJS for MultiSelect search

I have a multiselect bound to a store in which I implemented use of anyMatch: true to allow for True to allow any match - no regex start/end line anchors will be added (as per the comment in Filter.js). My problem is that I need to implement this as per the answer to multiselect-search-whole-string, in particular the solution provided in this fiddle https://fiddle.sencha.com/#fiddle/jf5
What I want to do is just set anyMatch: true, regardless, so I set it in Filter.js, but this has no effect on use of it. I searched the entire codebase for other instances of anyMatch: false and the only other one is in ext-all-debug.js. Why isn't setting these values having any effect? I don't see where else this default value could be set?
EDIT 1
I tried a different override, and while it is not exhibiting the right behavior, it is actually doing something this time. I figured that since the chunk of code that does work when embedded in the search attribute within the MultiSelector control was pretty much what was found in the MultiSelectorSearch's search method, that this was what I needed to focus on for the override. Any suggestions on tweaking this would be most welcome:
Ext.define('Ext.overrides.view.MultiSelectorSearch', {
override: 'Ext.view.MultiSelectorSearch',
search: function (text, me) {
var filter = me.searchFilter,
filters = me.getSearchStore().getFilters();
if (text) {
filters.beginUpdate();
if (filter) {
filter.setValue(text);
} else {
me.searchFilter = filter = new Ext.util.Filter({
id: 'search',
property: me.field,
value: text,
anyMatch: true
});
}
filters.add(filter);
filters.endUpdate();
} else if (filter) {
filters.remove(filter);
}
}
});
EDIT 2
Got it! The key was that originally, since this code was embedded in a singleton, I could reference the method by passing me from the calling form.panel. This did not work globally as an override, and required me to define the method as
search: function (text) {
var me = this,
I hope this helps someone out there!
Changing in ext-all-debug.js is not safe, when you do a production build this file will not get included.
Best way is to override the Filter class, here is how you can do it.
Ext.define('Ext.overrides.util.Filter', {
override: 'Ext.util.Filter',
anyMatch: true
});
And import this class in Application.js
Ext.require([
'Ext.overrides.util.Filter'
]);

How to setup custom css path for node.js markdownpdf?

I'm trying both gulp.js and grunt.js to convert from markdown to PDF, both of them use markdownpdf npm package.
This is my gulpfile.js
gulp.task('markdownpdf', function () {
gulp.src('_src/*.md')
.pipe(concat('document.md'))
.pipe(markdownpdf({
cssPath: '/_src/css/pdf.css',
paperFormat: 'A4',
paperOrientation: 'portrait',
paperBorder: '2cm'
}))
.pipe(gulp.dest('_dist'));
});
Without cssPath option, markdownpdf package picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css (I tired to edit this file to confirm that it was picked)
Please help how to setup custom css path.
Thanks.
What's worked for me is to start the path with a ./. The single dot represents the directory with the gulpfile in it.
e.g
gulp.task('docs', function () {
return gulp.src('./docs/*.md')
.pipe(markdownpdf({
'cssPath': './docs/assets/pdf.css'
}))
.pipe(gulp.dest('./web/docs/pdfs'));
});
so '/_src/css/pdf.css' maps to what?
It should respond to relative path notation, so if it picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css by default, then try setting your cssPath value to ../../../_src/css/pdf.css, assuming _src is in your project's root
Maybe you will need back 5 levels.
My gruntfile.js...
markdownpdf: {
options: {
cssPath: "../../../../../css/style.css",

Resources