search

liolok / hexo-asset-link

A Hexo plugin to convert Markdown style asset links to HTML style ones
https://www.npmjs.com/package/hexo-asset-link
MIT License
24 stars 8 forks source link

代码块含有 html, css 时候，代码块显示异常。 #1

Closed OHLIA closed 5 years ago

OHLIA commented 5 years ago
  1. MD 文档，换行类型为 Unix, 在代码块直接实现 html 代码内容。

  2. MD 文档，换行类型为 Win, 在代码块可显示 html 代码内容，但会缺失部分内容。

    版本信息：

    • NEXT 主题 V7.3.0；
    • 当前 HEXO 与插件版本：
    "name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.9.0"
},
"dependencies": {
"dplayer": "^1.25.0",
"hexo": "^3.9.0",
"hexo-asset-image": "0.0.2",
"hexo-blog-encrypt": "^2.2.2",
"hexo-deployer-git": "^1.0.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-feed": "^1.2.2",
"hexo-generator-index": "^0.2.1",
"hexo-generator-search": "^2.4.0",
"hexo-generator-tag": "^0.2.0",
"hexo-helper-live2d": "^3.1.1",
"hexo-lazyload-image": "^1.0.4",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-markdown-it-plus": "^1.0.2",
"hexo-renderer-marked": "^1.0.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.3.3",
"hexo-tag-aplayer": "^3.0.4",
"hexo-tag-dplayer": "^0.3.3",
"live2d-widget-model-hijiki": "^1.0.5"

html 代码块： 

<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 image to base64</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){ 
// 抓取上传图片，转换代码结果，显示图片的dom
var img_upload=document.getElementById("img_upload");
var base64_code=document.getElementById("base64_code");
var img_area=document.getElementById("img_area");
// 添加功能出发监听事件
img_upload.addEventListener('change',readFile,false);}
function readFile(){
var file=this.files[0];
if(!/image\/\w+/.test(file.type)){ 
alert("请确保文件为图像类型"); 
return false; 
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
base64_code.innerHTML = this.result; 
img_area.innerHTML = '<div>图片img标签展示：</div><img src="'+this.result+'" alt=""/>'; 
}
}
</script>
<input type="file" id="img_upload"/>
<textarea id="base64_code" rows="30" cols="360"></textarea>
<p id="img_area"></p>
</body>
</html>

另一段：

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                    <div id="security">
                        <div class="input-container">
                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
                            <label for="pass"> {{message}} </label>
                            <div class="bottom-line"></div>
                        </div>
                    </div>
                    <div id="encrypt-blog" style="display:none">
                        {{content}}
                    </div>
OHLIA commented 5 years ago
  1. MD 文档，换行类型为 Unix, 在代码块直接实现 html 代码内容。

  2. MD 文档，换行类型为 Win, 在代码块可显示 html 代码内容，但会缺失部分内容。 版本信息：

    • NEXT 主题 V7.3.0；
    • 当前 HEXO 与插件版本：
"name": "hexo-site",
 "version": "0.0.0",
 "private": true,
 "hexo": {
   "version": "3.9.0"
 },
 "dependencies": {
   "dplayer": "^1.25.0",
   "hexo": "^3.9.0",
   "hexo-asset-image": "0.0.2",
   "hexo-blog-encrypt": "^2.2.2",
   "hexo-deployer-git": "^1.0.0",
   "hexo-generator-archive": "^0.1.5",
   "hexo-generator-category": "^0.1.3",
   "hexo-generator-feed": "^1.2.2",
   "hexo-generator-index": "^0.2.1",
   "hexo-generator-search": "^2.4.0",
   "hexo-generator-tag": "^0.2.0",
   "hexo-helper-live2d": "^3.1.1",
   "hexo-lazyload-image": "^1.0.4",
   "hexo-renderer-ejs": "^0.3.1",
   "hexo-renderer-markdown-it-plus": "^1.0.2",
   "hexo-renderer-marked": "^1.0.1",
   "hexo-renderer-stylus": "^0.3.3",
   "hexo-server": "^0.3.3",
   "hexo-tag-aplayer": "^3.0.4",
   "hexo-tag-dplayer": "^0.3.3",
   "live2d-widget-model-hijiki": "^1.0.5"

html 代码块：

<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 image to base64</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){ 
// 抓取上传图片，转换代码结果，显示图片的dom
var img_upload=document.getElementById("img_upload");
var base64_code=document.getElementById("base64_code");
var img_area=document.getElementById("img_area");
// 添加功能出发监听事件
img_upload.addEventListener('change',readFile,false);}
function readFile(){
var file=this.files[0];
if(!/image\/\w+/.test(file.type)){ 
alert("请确保文件为图像类型"); 
return false; 
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
base64_code.innerHTML = this.result; 
img_area.innerHTML = '<div>图片img标签展示：</div><img src="'+this.result+'" alt=""/>'; 
}
}
</script>
<input type="file" id="img_upload"/>
<textarea id="base64_code" rows="30" cols="360"></textarea>
<p id="img_area"></p>
</body>
</html>

另一段：

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                    <div id="security">
                        <div class="input-container">
                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
                            <label for="pass"> {{message}} </label>
                            <div class="bottom-line"></div>
                        </div>
                    </div>
                    <div id="encrypt-blog" style="display:none">
                        {{content}}
                    </div>

发现可能是与插件 hexo-renderer-markdown-it-plus 冲突。

OHLIA commented 5 years ago
  1. MD 文档，换行类型为 Unix, 在代码块直接实现 html 代码内容。

  2. MD 文档，换行类型为 Win, 在代码块可显示 html 代码内容，但会缺失部分内容。 版本信息：

    • NEXT 主题 V7.3.0；
    • 当前 HEXO 与插件版本：
"name": "hexo-site",
 "version": "0.0.0",
 "private": true,
 "hexo": {
   "version": "3.9.0"
 },
 "dependencies": {
   "dplayer": "^1.25.0",
   "hexo": "^3.9.0",
   "hexo-asset-image": "0.0.2",
   "hexo-blog-encrypt": "^2.2.2",
   "hexo-deployer-git": "^1.0.0",
   "hexo-generator-archive": "^0.1.5",
   "hexo-generator-category": "^0.1.3",
   "hexo-generator-feed": "^1.2.2",
   "hexo-generator-index": "^0.2.1",
   "hexo-generator-search": "^2.4.0",
   "hexo-generator-tag": "^0.2.0",
   "hexo-helper-live2d": "^3.1.1",
   "hexo-lazyload-image": "^1.0.4",
   "hexo-renderer-ejs": "^0.3.1",
   "hexo-renderer-markdown-it-plus": "^1.0.2",
   "hexo-renderer-marked": "^1.0.1",
   "hexo-renderer-stylus": "^0.3.3",
   "hexo-server": "^0.3.3",
   "hexo-tag-aplayer": "^3.0.4",
   "hexo-tag-dplayer": "^0.3.3",
   "live2d-widget-model-hijiki": "^1.0.5"

html 代码块：

<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 image to base64</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){ 
// 抓取上传图片，转换代码结果，显示图片的dom
var img_upload=document.getElementById("img_upload");
var base64_code=document.getElementById("base64_code");
var img_area=document.getElementById("img_area");
// 添加功能出发监听事件
img_upload.addEventListener('change',readFile,false);}
function readFile(){
var file=this.files[0];
if(!/image\/\w+/.test(file.type)){ 
alert("请确保文件为图像类型"); 
return false; 
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
base64_code.innerHTML = this.result; 
img_area.innerHTML = '<div>图片img标签展示：</div><img src="'+this.result+'" alt=""/>'; 
}
}
</script>
<input type="file" id="img_upload"/>
<textarea id="base64_code" rows="30" cols="360"></textarea>
<p id="img_area"></p>
</body>
</html>

另一段：

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                    <div id="security">
                        <div class="input-container">
                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
                            <label for="pass"> {{message}} </label>
                            <div class="bottom-line"></div>
                        </div>
                    </div>
                    <div id="encrypt-blog" style="display:none">
                        {{content}}
                    </div>

发现可能是与插件 hexo-renderer-markdown-it-plus 冲突。

最新测试结果，不是跟其他插件起冲突。 只要开了 asset-folder 就会出现代码块问题。

liolok commented 5 years ago

@OHLIA First of all, excuse me for the delay of replying.

I've confirmed this bug, gonna submit a new issue in English (see #2 ), this issue will be closed and reserved only for reference.

Huge thanks for feedback! I'll try to fix bug as soon as possible.