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');//这边你可以自行修改
6. if (mainContent.length < 1)
7. return;
9. if (h_list.length > 0) {
10. var content = '<div id="navCategory">';
11. content += '<p style="font-size:16px"><b>目录：</b></p>';
12. content += '<ul>';
13. for (var i = 0; i < h_list.length; i++) {
14. var go_to_top = '<a name="_map' + i + '"></a>';
15. $(h_list[i]).before(go_to_top);
16. //Jupter-NoteBook
17. var targetName = h_list[i].tagName.toLowerCase();
18. console.log(targetName);
19. var li2_content = '';
20. if (targetName == 'h3') {
21. li2_content = '<li style="padding-left: 1em;"><a href="#_map' + i + '">' + $(h_list[i]).text() + '</a></li>';
22. } else {
23. li2_content = '<li><a href="#_map' + i + '">' + $(h_list[i]).text() + '</a></li>';
24. }
25. content += li2_content;
26. }
27. content += '</ul>';
28. content += '</div><p>&nbsp;</p>';
29. content += '<p style="font-size:16px"><b>正文：</b></p>';
30. if ($('#cnblogs_post_body').length != 0) {
31. $($('#cnblogs_post_body')[0]).prepend(content);
32. }
33. }
34. 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>';
35. $(mainContent[0]).prepend(allinfo);
36. });

老规矩，附录见原文链接（太长了，超出文章限制）