博客
关于我
关于博客园的在线演示
阅读量:468 次
发布时间:2019-03-06

本文共 952 字,大约阅读时间需要 3 分钟。

  在博客园发表文章,有时候就需要在线演示,demo演示,可是博客园又不能托管html文件。

  很多人也想了不少的方法,下面是我的实现方法。

  我也有看过其他博友的文章,是将代码写在textarea里,然后用js来实现。只是在预览后我们会发现,博客园将style标签里的内容屏蔽了,或者说,style标签里的样式,用在了整篇文章的版面。

   看看我刚做的demo:

  我在用谷歌进行搜索的时候,发现有一位博友的文章:除了代码演示,其他任何的标签都没有,但是右键查看源代码的话,发现博客园所有默认的html标签都还在,也就是说,该博友将标签隐藏了,专门用这篇文章来做demo。于是,我也就沿着这个思路进行设计。

  当然,在进行之前,我们需要解决一个问题,就是博客园会错误地引用textarea中的style标签,这里我的解决方案是:更改博客园的默认编辑器为文本编辑器,我们不让博客园提供任何的html代码,我们自己来编辑我们需要的html代码。

  然后把不必要的标签隐藏,将代码放到textarea中,

  <style type="text/css">

  *{display:none;}

  </style>

  <textarea id="cnblogsShowCode">

  <!-- 放置你的html代码 -->

  </textarea>

  再添加一段js代码来获取textarea中的内容,并在本页面中打开,js代码如下:

  

  当然,使用这种方法,也是可以不用隐藏不必要的标签。只是我发现,如果不隐藏的话,打开这个页面时,会首先显示出原来的内容,然后才显示你要演示的代码。给人一种被替换的感觉。所以,还是将博客园默认的html标签隐藏了比较好。

  这里还存在着一个问题:如果要执行的代码里也存在textarea标签,那么就会出现不必要的麻烦。<textarea id="cnblogsShowCode">会与第一次出现的</textarea>进行匹配,后面的代码都会忽略掉。这里的解决方案是:把代码里的</textarea>两边的尖括号改成用html代码代替,"<"写成"&gt", ">"写成"&lt",注意是代码里的标签,而不是最外层的</textarea>标签

转载地址:http://hlvbz.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(57)——MySQL查询当天、本周、本月、上周、本周、上月、距离当前现在6个月数据
查看>>
Mysql学习总结(58)——深入理解Mysql的四种隔离级别
查看>>
Mysql学习总结(59)——数据库分库分表策略总结
查看>>
Mysql学习总结(5)——MySql常用函数大全讲解
查看>>
Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
查看>>
Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
查看>>
Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
查看>>
Mysql学习总结(63)——Mysql数据库架构方案选择与分析
查看>>
Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结(65)——项目实战中常用SQL实践总结
查看>>
Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结(67)——MYSQL慢查询日志
查看>>
Mysql学习总结(68)——MYSQL统计每天、每周、每月、每年数据 SQL 总结
查看>>
Mysql学习总结(69)——Mysql EXPLAIN 命令使用总结
查看>>
Mysql学习总结(6)——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结(70)——MySQL 优化实施方案
查看>>
Mysql学习总结(71)——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
查看>>
Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
查看>>
Mysql学习总结(73)——MySQL 查询A表存在B表不存在的数据SQL总结
查看>>