docsify在线文档支持pdf查看
目录
步骤一:添加插件
步骤二:添加pdf地址
步骤三:成果展示
docsify是一个在github上很好用的文档转换网页的工具,但是大部分情况我们都是使用的markdown文件。最近想把pdf文档也能支持在这上面展示,研究后总结一下,方便有共同想法的小伙伴使用。
步骤一:添加插件
首先我们借助的是下面的仓库:
Docsify PDF嵌入式插件
To use, simply put these 2 lines below where you import the docsify.min.js
file.
<!-- PDFObject.js is a required dependency of this plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>
<!-- This is the source code of the pdf embed plugin -->
<script src="path-to-file/docsify-pdf-embed.js"></script>
<!-- or use this if you are not hosting the file yourself -->
<script src="//unpkg.com/docsify-pdf-embed-plugin/src/docsify-pdf-embed.js"></script>
然后在使用markdown文档中 引入pdf的在线地址
### Here are some of your previous markdown contents
blah blah blah```pdfpath-to-the-pdf-file
```
如果不能展示 或者有其他问题的话 根据文档介绍可以使用替换上面code后面的function为下面的renderer_func的function
window.$docsify = {name: 'some name',repo: 'some git repository',homepage: 'some_homepage.md',notFoundPage: 'some_404_page.md',markdown: {//If you have defined the follow section, //then you need to follow the steps in the next section.//(only the code section matters in this plugin)/* SECTION STARTcode: function(code, lang){some custom functions herereturn some_custom_results;}SECTION END */}
}//替换上面code后面的function为下面的functionvar renderer_func = function(code, lang, base=null) { var pdf_renderer = function(code, lang, verify) {function unique_id_generator(){function rand_gen(){return Math.floor((Math.random()+1) * 65536).toString(16).substring(1);}return rand_gen() + rand_gen() + '-' + rand_gen() + '-' + rand_gen() + '-' + rand_gen() + '-' + rand_gen() + rand_gen() + rand_gen();}if(lang && !lang.localeCompare('pdf', 'en', {sensitivity: 'base'})){if(verify){return true;}else{var divId = "markdown_code_pdf_container_" + unique_id_generator().toString();var container_list = new Array();if(localStorage.getItem('pdf_container_list')){container_list = JSON.parse(localStorage.getItem('pdf_container_list')); }container_list.push({"pdf_location": code, "div_id": divId});localStorage.setItem('pdf_container_list', JSON.stringify(container_list));return ('<div style="margin-top:'+ PDF_MARGIN_TOP +'; margin-bottom:'+ PDF_MARGIN_BOTTOM +';" id="'+ divId +'">'+ '<a href="'+ code + '"> Link </a> to ' + code +'</div>');} }return false;}if(pdf_renderer(code, lang, true)){return pdf_renderer(code, lang, false);}/* SECTION START: Put other custom code rendering functions herei.e. If the language of the code block is LaTex, put the code below to replace original code block with the text: 'Using LaTex is much better than handwriting!' inside a div container.if (lang == "latex") {return ('<div class="container">Using LaTex is much better than handwriting!</div>');}SECTION END */return (base ? base : this.origin.code.apply(this, arguments));
}
步骤二:添加pdf地址
对于我们pdf的地址 我们可以直接上传的github仓库里面,当然也可以使用自己的oss地址啥的。下面介绍一下git上pdf的地址填写。
上面可以拷贝出pdf的地址,但是需要我们替换一下。
假设 GitHub 文件的原 URL 是:
https://github.com/helloworld/Java/blob/master/docs/Algorithms, 4th Edition.pdf
将其更改为:
https://raw.githubusercontent.com/helloworld/Java/master/docs/Algorithms, 4th Edition.pdf
即,将 github.com
替换为 raw.githubusercontent.com
,并去除 /blob
。
原因:
raw.githubusercontent.com
返回存储在 GitHub 中的文件的 raw content
(原始内容),因此可以将它们简单地下载到计算机上。可以在网页上右键查看源文件的方式验证文件 URL 是否包含 raw.githubusercontent.com
ps:注意
如果提交修改了某个pdf,对应的地址也会变,需要改成新的。
步骤三:成果展示
docsify在线文档支持pdf查看相关推荐
- 使用轻量应用服务器部署Docsify在线文档平台
编者按:本文来自轻量应用服务器征文活动用户投稿,已获得作者(昵称CS社)授权发布.文章首发于微信公众号"弹性计算百晓生". 无论是出于兴趣爱好需要搭建个人博客,还是工作需要建设信息 ...
- springcloud微服务整合/集成swagger(knife4j-小刀)实现在线文档调试和查看功能
1.在gateway网关层加入以下依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifact ...
- semantic ui中文文档_求你别再用swagger了,给你推荐几个在线文档生成神器
开局先推荐: Java面试刷题网站www.javazhiyin.com 前言 最近公司打算做一个openapi开放平台,让我找一款好用的在线文档生成工具,具体要求如下: 必须是开源的 能够实时生成在 ...
- 推荐几个在线文档生成神器
前言 最近公司打算做一个openapi开放平台,让我找一款好用的在线文档生成工具,具体要求如下: 必须是开源的 能够实时生成在线文档 支持全文搜索 支持在线调试功能 界面优美 说实话,这个需求看起来简 ...
- 【计算机毕业设计】026在线文档管理系统
一.系统截图(需要演示视频可以私聊) 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,在线文档管理当然也不能排除在外.在线文档管理 ...
- Discuz!x1.5实现在线文档(doc、ppt、pdf)播放
实现在线文档(doc.ppt.pdf).视频等全攻略 一直在弄个中医教学方面的网站,有很多资料想用于教学,有些资料又不想学员下载.于是一直关注如何实现在线文档的功能,在论坛里学习了一段时间,加上自己 ...
- 在线文档查看方案- 易度云查看
在线文档查看方案- 易度云查看 引用:http://viewer.everydo.com/tech/#id16 系统总体组成 总体组成图如下: 其中: 查看器包括8种,在浏览器上运行.如需定制,可以使 ...
- 大话存储pdf 百度网盘_学用系列亲身体验百度网盘内测在线文档,有遗憾也有期待...
随着阿里系的Teambition网盘上线进入倒计时,百度网盘也终于开始发力,除了vip用户扩容11TB的豪举之外,另一个亮点就是上线了内测在线文档功能.胖胖老师也第一手获得了内测资格,今天就和大家分享 ...
- Github+docsify打造在线文档网站
写在前面 搭建这个在线文档的目的是方便自己对学习笔记的查看,比较喜欢 docsify 的主题风格,所以没有用 Github Pages 直接给的主题,自己根据官方文档进行了配置,目前已经成功上线. 1 ...
最新文章
- 深入理解计算机系统读书笔记
- java 二维数组奇数金字塔_二维数组:奇数阶魔方 | 新思维:C语言程序设计
- python index 报错_python基础语法常见报错类型
- 开源 协作工具_使用HackMD在开源项目上进行协作
- 米筐量化不支持c语言_从零开始学量化(三):数据获取途径
- 微课|中学生可以这样学Python(2.3.3节):filter()函数
- CCF CSP201912-1 报数
- tensorflow学习笔记(三十四):Saver(保存与加载模型)
- 《面向模式的软件体系结构2-用于并发和网络化对象模式》读书笔记(10)--- 接受器 - 连接器...
- 《高质量C编程指南》读后感
- 苹果手机怎么连接不了无线网络连接服务器,苹果手机连接wifi显示无互联网连接怎么办?...
- 华为防火墙笔记-网络地址转化NAT
- TypeError: format expected at most 2 arguments, got 7
- 免费开放可转盲文字库 阿里健康大药房呼吁关注视障群体用药安全
- C版iPhone4也给国产旗舰手机带来机会
- 建瓯最坏的YARA - APT | 病毒检测 | 常用模块和字段
- java.security.InvalidKeyException:illegal Key Size 报错解决
- windowns11系统下安装Proteus_8.7教程
- 【知识网络分析】作者合作网络(Co-authorship)
- 如何设置Code39码的起始码和终止码星号