Jupyter-Notebook版的博客园美化

文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html

上级回顾:Jupyter ~ 像写文章般的 Coding(微信链接

今天早上起来把博客园样式稍微弄了下,这样Jupyter-Notebook 通过NBConvert之后,你粘贴到博客园编辑器就可以直接显示了

用Jupyter编程的好处不想再说,稍微优化了下样式,基本上对前面的兼容还不错(原文的附录中有)

别忘了JS的引用(如果你也在用Jupyter写文章,上传两个样式文件,然后引用即可

<script src="https://cdn.bootcss.com/require.js/2.1.10/require.min.js"></script> <link href="DIV样式1.css" rel="stylesheet"> <link href="DIV样式2.css" rel="stylesheet">

基本上你Jupyter-Notebook什么样子,博客园显示也是什么样子了,先随便贴几张图

最爽的是异常文本信息都可以高亮显示,如果你想看效果的话,下一篇文章就是了

目录信息(我针对Jupyter改了下之前的目录脚本,扩展里面有)

代码和提示都是文字,以前还需要一个个的贴图,现在省了大量时间。可以再联想之前说的生成html,你的github page和博客静态页面不就直接有了吗?


对了之前写的 Jupyter ~ 像写文章般的 Coding 原文链接中已经更新,扩充了GUI的方法:

扩展:如果你使用了MathJax 这一段给你参考:

  1. <!-- MathJax 相关参考 --><script src="https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js"></script><script type="text/x-mathjax-config">MathJax.Hub.Config({
  2.    tex2jax: {
  3.        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
  4.        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
  5.        processEscapes: true,
  6.        processEnvironments: true
  7. },    displayAlign: 'center', "HTML-CSS": {
  8.        styles: {'.MathJax_Display': {"margin": 0}},
  9.        linebreaks: { automatic: true }
  10. }
  11. });</script>

补充:(这样的话,前几天说的目录生成脚本就要修改一下了~)

  1. $(function () {
  2. // 生成目录索引列表
  3. var mainContent = $('#cnblogs_post_body');
  4. var h_list = $('#cnblogs_post_body h2,#cnblogs_post_body h3');//这边你可以自行修改
  5. if (mainContent.length < 1)
  6. return;
  7. if (h_list.length > 0) {
  8. var content = '<div id="navCategory">';
  9.        content += '<p style="font-size:16px"><b>目录:</b></p>';
  10.        content += '<ul>';
  11. for (var i = 0; i < h_list.length; i++) {
  12. var go_to_top = '<a name="_map' + i + '"></a>';
  13.            $(h_list[i]).before(go_to_top);
  14. //Jupter-NoteBook
  15. var targetName = h_list[i].tagName.toLowerCase();
  16.            console.log(targetName);
  17. var li2_content = '';
  18. if (targetName == 'h3') {
  19.                li2_content = '<li style="padding-left: 1em;"><a href="#_map' + i + '">' + $(h_list[i]).text() + '</a></li>';
  20. } else {
  21.                li2_content = '<li><a href="#_map' + i + '">' + $(h_list[i]).text() + '</a></li>';
  22. }
  23.            content += li2_content;
  24. }
  25.        content += '</ul>';
  26.        content += '</div><p>&nbsp;</p>';
  27.        content += '<p style="font-size:16px"><b>正文:</b></p>';
  28. if ($('#cnblogs_post_body').length != 0) {
  29.            $($('#cnblogs_post_body')[0]).prepend(content);
  30. }
  31. }
  32. var allinfo = '<p><strong>文章汇总:<a href="https://www.cnblogs.com/dotnetcrazy/p/9160514.html" target="_blank">https://www.cnblogs.com/dotnetcrazy/p/9160514.html</a></strong></p>';
  33.    $(mainContent[0]).prepend(allinfo);
  34. });

老规矩,附录见原文链接 http://www.cnblogs.com/dotnetcrazy/p/9201976.html

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术栈大杂烩

Linux:终端提示符 (prompt) 不如期生效原因

先来简单介绍下, prompt是什么鬼? 顾名思义就是提示符的意思, 看起来和我们遥远, 但实际上只要是每个接触shell的童鞋, 都有看到, 那就是我们在输命...

985
来自专栏jianhuicode

上手React Native--常用属性介绍

这几天打算学习并实践ReactNative,学习记录中有不对的地方请大家指出来,互相交流。(-_-)   关于学习ReactNative需要准备的基础知识,①...

2337
来自专栏张善友的专栏

使用WiX制作简单MSI安装程序

WiX完全用xml描述,使用命令行来生成。只要用任何一个文本编辑器就可以了。但是为了开发效率,我们还是借助于辅助工具比较好。是一般使用的工具是两个:一个Visu...

3419
来自专栏互联网杂技

react+redux+webpack教程2

先弄个什么例子呢?如果是现代的MVVM框架,可能会用双向绑定来吸引你。那react有双向绑定吗? 没有。 也算是有吧,有插件。不过双向绑定跟react不是一个路...

3337
来自专栏游戏杂谈

Perl遍历目录

1、默认activePerl下的采用的编码是gbk,所以需要将字符串转为gbk才不会显示乱码

521
来自专栏软件开发

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。AngularJS是框架而jQuery则是库。

913
来自专栏软件开发

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

一、前端MVC概要 1.1、库与框架的区别 ? 框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Angula...

25510
来自专栏DeveWork

【译】WordPress 中的50个过滤器(6):第41-50个过滤器

本文为系列第三篇,原文:50 Filters of WordPress: Filters 41-50 原文地址 即将吹响终点的号角!翻译得好累,如果你看不惯俺的...

1836
来自专栏漫漫前端路

记录面试中一些回答不够好的题(Vue 居多)

grid 学习:https://www.jianshu.com/p/d183265a8dad

1762
来自专栏前端杂货铺

History API与浏览器历史堆栈管理

移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现不存在...

4145

扫码关注云+社区