Jupyter-Notebook版的博客园美化

Jupyter ~ 像写文章般的 Coding：https://www.cnblogs.com/dotnetcrazy/p/9198629.html

更新：针对win版，两个样式合并一起了具体可以看：https://www.cnblogs.com/dotnetcrazy/p/9210075.html

效果抢先预览：http://github.lesschina.com/python/base/oop/1.封装.html

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

稍微优化了下，基本上对前面的兼容还不错，贴下优化代码：

别忘了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改了下之前的目录脚本，扩展里面有）

这些都是文字，以前还需要一个个的贴图，省了大量时间：

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

复制代码
<!-- MathJax 相关参考 -->
<script src="https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        processEnvironments: true
    },
    displayAlign: 'center',
    "HTML-CSS": {
        styles: {'.MathJax_Display': {"margin": 0}},
        linebreaks: { automatic: true }
    }
});
</script>
复制代码

补充：（这样的话，前几天说的目录生成脚本就要修改一下了～）

复制代码
$(function () {
    // 生成目录索引列表
    var mainContent = $('#cnblogs_post_body');
    var h_list = $('#cnblogs_post_body h2,#cnblogs_post_body h3');//这边你可以自行修改

    if (mainContent.length < 1)
        return;

    if (h_list.length > 0) {
        var content = '<div id="navCategory">';
        content += '<p style="font-size:16px"><b>目录：</b></p>';
        content += '<ul>';
        for (var i = 0; i < h_list.length; i++) {
            var go_to_top = '<a name="_map' + i + '"></a>';
            $(h_list[i]).before(go_to_top);
            //Jupter-NoteBook
            var targetName = h_list[i].tagName.toLowerCase();
            console.log(targetName);
            var li2_content = '';
            if (targetName == 'h3') {
                li2_content = '<li style="padding-left: 1em;"><a href="#_map' + i + '">' + $(h_list[i]).text() + '</a></li>';
            } else {
                li2_content = '<li><a href="#_map' + i + '">' + $(h_list[i]).text() + '</a></li>';
            }
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:16px"><b>正文：</b></p>';
        if ($('#cnblogs_post_body').length != 0) {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
    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>';
    $(mainContent[0]).prepend(allinfo);
});
复制代码

 

附录1：

附录2：

 

posted @   鲲逸鹏  阅读(7119)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
SQL AI 助手