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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

玩转Google的XSS游戏

作者 Taskiller Hi基友们,本文主要描述Google前些天发布的关于XSS漏洞游戏的玩法,地址在这里。 https://xss-game.appsp...

18910
来自专栏AhDung

【C#】注意用“划算”的方式使用图标

先解释一下何谓“划算”:假定一个Winform程序包含若干个窗体,每个窗体左上角都要显示图标(即要设置Form.Icon属性),该程序本身也要有个图标(用于在O...

833
来自专栏葡萄城控件技术团队

MultiRow发现之旅(一)- 高效模板设计器

在这篇博客中我将向大家介绍一个集成在VisualStudio中的很酷很给力的设计器——MultiRow模板设计器。它与VisualStudio无缝集成,提供与V...

1728
来自专栏点滴积累

geotrellis使用(十三)数据导入BUG解决方案说明

Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 BUG说明...

3617
来自专栏向治洪

百度地图android studio导入开发插件

百度地图SDK v3.5.0开发包下载地址:http://lbsyun.baidu.com/sdk/download?selected=location 开...

1K8
来自专栏C/C++基础

jsoncpp初探

首先说一下JSON。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSO...

592
来自专栏程序员叨叨叨

4.3 CG 编译

计算机只能理解和执行由 0、1 序列(电压序列)构成的机器语言,所以汇编语言和高级语言程序都需要进行翻译才能被计算机所理解,担负这一任务的程序称为语言处理程序,...

662
来自专栏walterlv - 吕毅的博客

WPF 跨应用程序域的 UI(Cross AppDomain UI)

发布于 2017-11-12 16:36 更新于 2017-11...

682
来自专栏红色石头的机器学习之路

Jupyter notebook入门教程(下)

Jupyter notebook的入门教程第二部分的英文原文出处: Getting started with the Jupyter notebook (p...

2480
来自专栏青枫的专栏

打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定...

863

扫码关注云+社区