最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】搞清楚印象笔记中带code的html代码内容需要格式化成什么格式才发布内容不带code

HTML crifan 167浏览 0评论
折腾:
【未解决】mac中如何在MAMP中调试WordPress的php代码
期间,接着就是去研究:
印象笔记中的带code的html的内容和需要格式成什么格式的html,发布后才不会出现多余的code
可以看到,此处code代码段外部的边框,不是我以为的pre和code,而是div的box
"


<div><br /></div><div><br /></div><div>此处包含要测试的内容,包括code代码:</div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-size: 12px; font-family: Monaco;">some code include</span></div><div><span style="font-size: 12px; font-family: Monaco;">little &lt;</span></div><div><span style="font-size: 12px; font-family: Monaco;">greater &gt;</span></div><div><span style="font-size: 12px; font-family: Monaco;">at &amp;</span></div><div><span style="font-size: 12px; font-family: Monaco;">and other chars</span></div></div><div>希望同步后,不要:</div><div>有多余的code</div><div>html字符不要被转义</div><div><br /></div"
去把这个htl放到新建干净的html中:
看看显示效果如何:
和印象笔记中的效果对比:
然后此处的目的就是:
  <div
    style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;">
    <div><span style="font-size: 12px; font-family: Monaco;">some code include</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">little &lt;</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">greater &gt;</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">at &amp;</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">and other chars</span></div>
  </div>
处理成,类似这种:
<prev><code>
    some code include
    little <
    greater >
    at &
    and other chars
</code></prev>
即:
  • 把最外层的style=”box-sizing的div换成prev(和code)
  • 把box中的文字的style都去掉,只保留内容本身
    • 且注意把已转移的html的实体转换回来
      • 比如:&lt;换成<
但是上述pre(和 或 code),结果显示出来都无法换行:
所以还要搞清楚如何换行
那去看看现在的crifan.com中的已经正确格式化的帖子中都是什么格式和html的代码
html代码是:
预览效果是:
符合预期效果。
那就是看如何才能把前面的:
  <div
    style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;">
    <div><span style="font-size: 12px; font-family: Monaco;">some code include</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">little &lt;</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">greater &gt;</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">at &amp;</span></div>
    <div><span style="font-size: 12px; font-family: Monaco;">and other chars</span></div>
  </div>
处理成上面的:
<pre class="brush: bash; gutter: true">some code include
little &lt;
greater &gt;
at &amp;
and other chars</pre>
即:
  • 把最外层的style=”box-sizing的div换成prev(和code)
  • 把box中的文字的style都去掉,只保留内容本身
    • 其中已转移的html的实体无需转换
      • 比如:&lt; 还保留,不需要转换成 <

转载请注明:在路上 » 【已解决】搞清楚印象笔记中带code的html代码内容需要格式化成什么格式才发布内容不带code

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
88 queries in 0.121 seconds, using 20.67MB memory