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. });

老规矩,附录见原文链接(太长了,超出文章限制)

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2018-06-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

见到了“公司”定义一个Company类,那么见到了“字段”是不是也可定义一个Column类?

  既然见到了公司,我们可以定义一个Class Company ,那么我们见到了字段,是不是也可以定义一个Class ColumnInfo呢? 公司的描述信息类...

25690
来自专栏PHP在线

PHP版的jQuery

个人认为,对于Web前端程序员和跟HTML和CSS打交道的人来说,jQuery是有史以来最伟大的发明。jQuery的出现使Web程序员的开发效率突飞猛进,不亚于...

39130
来自专栏Android知识点总结

Android基于TCP的五子棋双人对战实现

19820
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(二)

在Android Studio你不知道的快捷键(一)里面,主要讲述了一些窗口操作的快捷键还有补全参数提示等,这一篇会分享一些代码代码编辑的快捷键。(默认Keym...

12220
来自专栏lhyt前端之路

从单向到双向数据绑定0.前言1.单向数据(代表:react)2.观察者模式3.双绑的中间枢纽——Object.defineproperty(代表:vue)4. 脏值检测(代表:angular1)前面说

用户最满意的,无非就是界面的操作能实事反应到数据。而实现这种的可以有双向数据绑定、单向数据流的形式。双向数据绑定是,ui行为改变model层的数据,model层...

20740
来自专栏云瓣

深入Redux架构

关于redux 之前写了一篇通过一个demo了解Redux,但对于redux的核心方法没有进行深入剖析,在此重新总结学习,完整的代码看这里。(参考了React ...

29560
来自专栏非著名程序员

仿苹果数字键盘以及判断信用卡有效期的Editext

这次带来一个小小的信用卡有效期规则的Editext,额外赠送内置数字键盘的开发 首先来看下需求: 1) 月份数字: λ 数字输入0:后一位数字可输入...

22950
来自专栏web编程技术分享

eclipse常用快捷键

30360
来自专栏农夫安全

浅析XSS的几种测试方法

0x00 背景 最近看到一个好玩的xss社区,准备通过几个经典的关卡来剖析一下XSS,本文仅提供经典案例。 试玩链接:http://tr.secevery...

35080
来自专栏LanceToBigData

XML(一)XML大揭秘

前言 每天都要学习很多新的知识,比你厉害的程序员比你还努力,那你混的下这口饭吗?所以不抱怨,坚持!接下来给大家分享的是xml。可能很多做开发的都遇到过xml, ...

21290

扫码关注云+社区

领取腾讯云代金券