(废话):今天在做实验的时候遇到了一点问题,就问了问本科的室友,结果室友推荐我使用Jupyter Notebook来写代码,以前看其他同学使用过,但是一直在用Pycharm写,需要的时候顶多是Debug看一下,直到今天室友展示了以后才决定使用这个工具。

写在前面:由于本人之前自学过前端的东西,了解一些HTML语言和CSS相关的东西,所以想到了这个方法,另外自己的Jupyter Notebook是用Anaconda来安装的,所以如果你不是使用annaconda来安装的,这个方法可能不适用,安装可以参考:https://www.jianshu.com/p/d3a5ec1d9a08

问题展示:

打开Jupyter Notebook后发现code区字体又丑又小,让人一看就很不舒服,未更改之前如下图所示(默认效果可能更自己的浏览器有关)

然后自己尝试着上百度查找更改方案,结果基本都是让你更改浏览器(Chorme)设置,但是我的浏览器默认Microsoft Edge,设置里也没找到更改的,于是放弃了。。。。

解决方案:

1.首先需要找到这个文件:这其实就是一个CSS文件

文件的位置:D:\Anaconda\Lib\site-packages\notebook\static\components\codemirror\lib 打开文件后是一些CSS样式的属性设置(为什么会是这个文件,后面会说)。

2.更改样式:打开文件后需要找到这部分代码,这部分就是我们需要修改的部分,可以使用Ctrl+F的方式快速定位到这(为什么要选择这部分,在后面总结也会说),接下来就可以更具自己的喜好更改了,不过我建议大家不要改动其他属性,更改一下三个属性足以满足大家需求了。

font-family :字体样式 

后面‘ ’中的就是目前的字体样式,你可以更改为自己想要的字体,本人目前使用的是'Courier',效果如图,在此推荐一些最适合程序员的10种字体

font-size: 字体大小

字体大小可以有两种表示:px、百分比,具体效果可以看图(使用Chorme测试)

本人设置的是20px,设置字体大小后需要设置行高,否者会有重叠现象,20px效果图:

line-weight:行高

行高设置不易过大,不然会很稀疏,在大多数浏览器中默认行高大约是 110% 到 120%,本人设置的是115%,效果如图所示

总结:

1.本人的第一个博客,写的是真的简单,也是看了另一个本科室友开了博客才想起来写的,附上这个逼的链接汤达人

2.其实整个过程其实就是一个CSS样式更改的过程,但是本人更改的只是Code框的部分样式,我们定位到的文件中的这个位置,你会发现之前有一个提示:

看他的意思是让你不要更改,但是你在浏览器中右键检查这个网页的代码就会发现,它的class是codemirror,这部分就是编辑框的的内容,所以我大胆的尝试了,大不了重装,哈哈哈,结果!!!!work了=。=,这也是为什么我要找到这个codemirror的文件的原因,当然看到这个class我先想到的是CodeMirror,jupyter notebook本身就是一种在线式的编辑器,所以我直接在anaconda文件夹里直接搜索到了这个文件。

3.开发者模式查看网页源代码,能够帮助你更好地认识前端,更多关于CSS样式和前端的学习我墙裂推荐W3School 

Jupyter Notebook 更改字体、字体大小、行高的更多相关文章

  1. 修改jupyter notebook主题、字体和启动路径

    目录 1.安装主题 2.切换 3.字体 4.启动路径 1.安装主题 window在cmd中输入 pip install --upgrade jupyterthemes 完成后输入查看 jt -l 就提 ...

  2. jupyter notebook 更改工作环境和浏览器

    转载自:https://blog.csdn.net/u011141114/article/details/78556227 1 修改默认目录 最近刚刚开始学习Python,比较好的一个IDE就是jup ...

  3. jupyter notebook改变行间图片大小

    jupyter notebook使用起来代码效果很直接,这是我最喜欢的一点,但是主题单一,后来改了一下主题.也可以接受了,但是还有一个问题是显示图片太小我们可以用两个方法来改变它. 一.可以通过rcP ...

  4. Jupyter Notebook 更改本地目录

    首先如果使用anaconda直接安装jupyter notebook的话,直接在windows的cmd中输入jupyter notebook是没有用的,参见下图: 原因可能是anaconda代理了所有 ...

  5. 深入了解CSS字体度量,行高和vertical-align

    line-height和vertical-align在CSS中是两个简单的属性.如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们.但事实上并不如此.他们其实很复杂,也是CSS中 ...

  6. 修改jupyter notebook的字体等样式

    方法一 /lib/site-packages/notebook/static/custom/ 里面有个custom.css文件,你只要修改这个文件就可以了. /* jupyter notebook中显 ...

  7. CSS.03 -- 浏览器行高、字体;盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  8. css行高的用法总结

    css没有提供一个直接设置行间距的方式,所以只能通过设置行高来间接的设置行间距,行高越大行间距就越大,用 line-height 来设置行高. .p1 { /* 设置行高 */ line-height ...

  9. anaconda 环境新建/删除/拷贝 jupyter notebook上使用python虚拟环境 TensorFlow

    naconda修改国内镜像源 国外网络有时太慢,可以通过配置把下载源改为国内的通过 conda config 命令生成配置文件,这里使用清华的镜像: https://mirrors.tuna.tsin ...

随机推荐

  1. Python 英语单词本

    python pymysql re requests socket库的简单运用 要考试了,这里用所学的知识做一个实例 pymysql库 这个库是用来连接数据库的,使用数据库语句在python里创建表和 ...

  2. Chapter 8 Selection Bias

    目录 8.1 The structure of selection bias 8.2 Examples of selection bias 8.3 Selection bias and confoun ...

  3. 剖析Defi之Uinswap_2

    学习核心合约UniswapV2Pair,在父合约UniswapV2ERC20的基础上增加资产交易及流动性提供等功能. 交易对合约本身是erc20合约,代币表示流动性,代币在提供流动性的地址里,当提供流 ...

  4. Java EE数据持久化框架 • 【第1章 MyBatis入门】

    全部章节   >>>> 本章目录 1.1 初识MyBatis 1.1.1 持久化技术介绍 1.1.2 MyBatis简介 1.1.2 Mybatis优点 1.1.3 利用Mav ...

  5. 首次分享,大厂资深测试做Api接口自动化测试的关键思路都在这里了

    引言 与UI相比,接口一旦研发完成,通常变更或重构的频率和幅度相对较小.因此做接口自动化的性价比更高,通常运用于迭代版本上线前的回归测试中. 手工做接口测试,测试数据和参数都可以由测试人员手动填写和更 ...

  6. 基于GO语言实现的固定长度邀请码

    1. 选取数字加英文字母组成32个字符的字符串,用于表示32进制数. 2. 用一个特定的字符比如`G`作为分隔符,解析的时候字符`G`后面的字符不参与运算. 3. LEN表示邀请码长度,默认为6. g ...

  7. 接口调试没有登录态?用whistle帮你解决

    页面的域名是 a.com,接口的域名为 b.com,这是跨域的因此不会将 cookie 带过去的,也就没有登录态. 解决方法:利用 whistle 的 composer 功能. whistle git ...

  8. hadoop 之 常用基本操作

    HDFS 常用命令(hadoop fs.hadoop dfs.hdfs dfs): hadoop fs -ls 显示当前目录结构,-ls -R 递归显示目录结构 hadoop fs -mkdir 创建 ...

  9. JMeter_请求header

    在接口调试的时候,请求参数确认正确无误,但是请求失败! 通过对比header,发现header缺少一些字段(token)以及传入的值不正确(Content-Type) 增加这些字段信息后,接口调试成功 ...

  10. store在模块化后,获取state中的值时undefined

    目录结构 用this.$store.getters.showNotif ,加上模块名this.$store.getters.apply.showNotif都取不到值, 控制台打印store,发现这样的 ...