我尝试了以下几种方法,在jupyter notebook

  1. 使用外部css文件,在jupyter 文件夹中增加一个custom文件夹,并且在该文件夹中增加custom.css就会替代jupyter notebook。但是这个不好的地方,由于github中无法显示自定义的css文件,导致失败。(参考博客
  2. 使用魔法方法%%html,但是这样子也有问题,我想要导出成gitbook的时候会花很多力气进行排版在这里插入图片描述
  3. 使用标签,html是支持标签的,所以我就使用了标签,但是我不想手打标签,所以我就写了一个js函数,来实现。这里和之前相对应,在上篇文章中的main.min.js中的MarkdownCell.prototype.insert_inline_image_from_blob这个函数中修改代码

    MarkdownCell.prototype.insert_inline_image_from_blob = function(blob) {
        /**
         * Insert markup for an inline image at the current cursor position.
         * This works as follow :
         * - We insert the base64-encoded blob data into the cell attachments
         *   dictionary, keyed by the filename.
         * - We insert an img tag with a 'attachment:key' src that refers to
         *   the attachments entry.
         *
         * Parameters:
         *  file: Blob
         *      The JS Blob object (e.g. from the DataTransferItem)
         */
        


		 function GetPicturepath()
		{
		  var url = document.location.toString();
		  var arrUrl = url.split("//");
		  var start = arrUrl[1].indexOf("/");
		  var relUrl = arrUrl[1].substring(start);//stop省略,截取从start开始到结尾的所有字符
			relUrl = relUrl.replace('\/notebooks\/','')
		  if(relUrl.indexOf("?") != -1){
		    relUrl = relUrl.split("?")[0];
		  }
			var re2Url=relUrl.split("/"); 
			re2Url.pop();
			relUrl = re2Url.join("/")+'/pictures/';
		  return relUrl;
		} 



        var that = this;
        var pos = this.code_mirror.getCursor();
        var reader = new FileReader();
        // We can get either a named file (drag'n'drop) or a blob (copy/paste)
        // We generate names for blobs
        var key;
        if (blob.name !== undefined) {
            key = encodeURIandParens(blob.name);
        } else {
            key = '_auto_' + Object.keys(that.attachments).length;
        }

        reader.onloadend = function() {
            var d = utils.parse_b64_data_uri(reader.result);
            if (blob.type != d[0]) {
                // TODO(julienr): Not sure what we should do in this case
                console.log('File type (' + blob.type + ') != data-uri ' +
                            'type (' + d[0] + ')');
            }


            if(blob.name=='image.png'){
            	var picture_name=Math.random().toString(36).substr(2)+'.png';
            }else{
            	var picture_name=blob.name
            }
           
            var api_url =  'http://'+document.domain+'/api/contents/'+GetPicturepath()+picture_name;
            $.ajax({
					type: 'PUT',
					url: api_url,
					contentType:"application/json",
					// date:JSON.parse('{"format":"base64","name":"picture_name"}'),
					data: JSON.stringify({'content':d[1],'format':"base64",'name':picture_name,'path':GetPicturepath()+picture_name,'type':'file'}),
				 	beforeSend:function(jqXHR,options){
				 		var _xsrf = (/_xsrf=[^;]+;?/i).exec(document.cookie)[0];
						_xsrf = _xsrf.replace(/(_xsrf=)/,'');
    					jqXHR.setRequestHeader("X-XSRFToken",_xsrf) ;  // 增加一个自定义请求头
  					},
  					success: function (data) {
  						

  						var width = window.getSelection().toString(); 
  						document.execCommand('delete');
  						var image_url = 'pictures/'+picture_name;
  						if(width==""){
  							var img_md = '![' + key + '](' + image_url + ')';
  						}else{
  							var img_md = '<img src="'+image_url+'" width="'+width+'" />'
  						}
           				that.code_mirror.replaceRange(img_md, pos);
           			},	
			});  

        }

        reader.readAsDataURL(blob);
    };

最后实现效果
首先写一个数字
在这里插入图片描述
选中数字
在这里插入图片描述
此时进行ctrl+v(和上篇文章一样)
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐