在个人网站中引入Markdown编辑文本

news/2024/5/19 7:59:42/文章来源:https://blog.csdn.net/baobaopizi/article/details/74991497

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

下载地址

https://github.com/evilstreak/markdown-js/releases
这里写图片描述

选择markdown-browser-0.6.0-beta1.tgz

下载后解压会得到两个库文件

  1. markdown.js
  2. markdown.min.js

示例代码

<!DOCTYPE html>
<html><body><textarea id="text-input" oninput="this.editor.update()"rows="6" cols="60">Type **Markdown** here.</textarea><div id="preview"> </div><script src="markdown.js"></script><script>function Editor(input, preview) {this.update = function () {preview.innerHTML = markdown.toHTML(input.value);};input.editor = this;this.update();}var $ = function (id) { return document.getElementById(id); };new Editor($("text-input"), $("preview"));</script></body>
</html>

效果图

这里写图片描述

这样就实现了引用Markdown到浏览器中的目的,但美中不足的是无法像CSDN的Markdown编辑器一样功能强大。没有菜单栏。

Tips

在第一次下载时使用的是 markdown-0.6.0-beta1.tgz 这个压缩包解压后文件会比较多,其中有一个说明文档就是上面的示例代码,但用这个压缩包里面的js文件在浏览器里引用会报markdown is not definedexport is not defined 换了 markdown-browser-0.6.0-beta1.tgz这个包里面的文件就很顺利了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_872085.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐几个免费好用的毕业论文(设计)文献查找网站包括外文文献(亲测有用)

1、剑桥大学 https://www.repository.cam.ac.uk/discover 2、ScienceDirect https://www.sciencedirect.com/ 3、CiteSeerX http://citeseerx.ist.psu.edu/index 4、Open Accsess Library https://www.oalib.com/ 5、国家科技图书文献中心 http://oar.nstl.gov.cn…

推荐两个免费的论文查重网站(24小时一次)

推荐两个免费的论文查重网站&#xff08;一天24小时一次&#xff09; 这两个都要扫码登陆&#xff0c;然后选择免费查重&#xff0c;在后面的选择中要钱的都不要选择就能直接提交选择查重。 PaperWord https://www.paperword.com/ PaperYY https://www.paperyy.com/

网站优化策略

网站的优化建议 页面尽量只使用div标签并且嵌套层级不要太多。Html页面不能包含css、JavaScript代码&#xff0c;全部放到单独的文件。title标签包含关键词不要超过3个&#xff0c;每个页面title内容要对应页面内容。Description标签包含关键词4~5次&#xff0c;每个页面描述除…

4000万美元维护一个网站,贵吗?

5亿用户&#xff0c;365*24h连续运行&#xff0c;完美的浏览器&#xff08;桌面/移动&#xff09;兼容性&#xff0c;优秀的用户体验&#xff0c;一流的问题解答团队&#xff0c;TB级数据管理&#xff0c;支持300种语言&#xff0c;这是一个网站&#xff0c;非营利性&#xff0…

网站服务配置过程 nginxⅠ

1. nginx程序目录结构信息 /etc/logrotate.d/nginx 利用logrotate实现日志文件自动切割利用脚本定时任务实现日志切割#!/bin/bashmv nginx.log nginx.log_$(date %F_%T)systemctl restart nginx/etc/nginx/nginx.conf 主配置文件 /etc/nginx/conf.d/default…

网站服务架构部署(LNMP)

1. LNMP架构说明 LNMT: linux nginx mysql tomcat LNMP: linux nginx mysql php/python LAMP: linux apache mysql php 作用: 可以使用架构处理动态访问请求2. LNMP架构部署过程 Linux : 1) 系统安全服务需要关闭 selinux iptables 2) 确认系统/tmp目录权限 1777nginx : 1) 安…

网站服务负载均衡 Ⅰ

1. 负载均衡详述部分 Syntax: upstream name { ... } --- 指定可以分配用户请求web节点信息 Default: — Context: http分配后端节点方式方法: 根据能力进行分配用户访问请求 weight --权重 按比例进行权重分配访问资源 upstream oldboy { server 10.0.0.7:80 weight3; se…

python爬虫爬取网站文章

这次爬取网站为&#xff1a;‘http://www.agri.cn/kj/syjs/zzjs/’ 程序大致分为六步&#xff1a; 1、引入相关的库和设置两个正则表达式规则 2、设置爬取的网页数量 3、设置网页中包含文章的HTML部分 4、在获取的部分中提取包含文章连接的HTML语言 5、获取文章连接 6、根…

【服务器】iis的重启服务器、重启iis、回收(重启)线程池、刷新网站

windows自带iis&#xff0c;如果没有的也可以控制面板中启用 1、在开始按钮点击右键&#xff0c;选择控制面板。 2、接着我们从控制面板选择“程序”。 3、然后选择“启用或关闭windows功能”。 4、从列表中选择Internet Infomation Services。 5、并且把相应的功能条…

【调优】网站前后端性能优化

文章目录 前端1. 尽可能减少要传输的数据量2. 减少关键资源的总数3. 缩短关键渲染路径长度4.网络传输优化Total Connection TimeTTFB Content Download 5.预加载 后端1. 批量思想&#xff1a;批量操作数据库2. 异步思想&#xff1a;耗时操作&#xff0c;考虑放到异步执行3. 空…

网站的消息通知系统设计漫谈

现在的很多网站都有消息通知系统&#xff0c;比如新浪微博页面右上角的小黄签&#xff0c;比如Facebook页面左上角的Notifications。但是消息通知系统的说法是个笼统的概念&#xff0c;我理解的其本质功能是网站把某些对用户有价值的信息及时告知用户。比如常见的SNS关系中谁关…

计算机学习网站

C语言中文网&#xff1a;C语言程序设计门户网站(入门教程、编程软件)http://c.biancheng.net/Python3 os.path() 模块 | 菜鸟教程Python3 os.path() 模块 Python3 OS 文件/目录方法 os.path 模块主要用于获取文件的属性。 以下是 os.path 模块的几种常用方法&#xff1a; 方法说…

HTML资料之网站ico图标

◆ 使用ico图标&#xff1a; 将favicon.ico 这个图标放到根目录下&#xff0c;使用link标签引用。 <link rel"shortcut icon" href"favicon.ico" type"image/x-icon"/>注&#xff1a;后面的type“image/x-icon” 属性可以省略。 ◆ ◆ 制…

curl网站开发指南

我一向以为&#xff0c;curl只是一个编程用的函数库。 最近才发现&#xff0c;这个命令本身&#xff0c;就是一个无比有用的网站开发工具&#xff0c;请看我整理的它的用法。 curl网站开发指南 阮一峰 整理 curl是一种命令行工具&#xff0c;作用是发出网络请求&#xff0c;然…

VuePress + Github Pages 搭建博客网站

VuePress Github Pages 搭建博客网站 VuePress VuePress 是基于 Vue 的静态网站生成器&#xff0c;有以下特点&#xff1a; 简洁至上&#xff1a;以 Markdown 为中心的项目结构&#xff0c;以最少的配置帮助你专注于写作Vue 驱动&#xff1a;享受 Vue webpack 的开发体验&…

黑色大气版织梦资源网网站kyuan源码

介绍&#xff1a; 1&#xff1a;上传源码到根目录 2&#xff1a;修改数据库账号密码 打开文件data 打开common.inc.php文件修改自己的数据库账号密码 点击保存 3&#xff1a;上传数据库文件 4&#xff1a;访问后台 域名yunwu 后台账号&#xff1a;admin 密码&#xff1a;12…

Lerx开源网站内容管理系统

介绍&#xff1a; Lerx 开源网站内容管理系统(CMS)是一个以JavaMySQL进行开发的内容管理系统源码。 一.简介 1.跨平台设计&#xff0c;能无差别运行于Windows、Linux、MacOS等系统平台。 2.采用了安全、稳定的基于Java的SpringMVC框架。 3.数据库ORM持久化框架使用Hibernate 5…

小说站群网站响应式源码

介绍&#xff1a; 绿茶小说站群2.x-秒收隔天速出权重-小说流量稳定收割机-精品轻量级PHP站群系统站群系统,小说行业专用引流精品站群,绿茶小说站群为独立站群系统&#xff08;无需依托CMS&#xff09;&#xff0c;独立的整篇小说优化内容库&#xff08;拒绝句子拼凑&#xff0…

QQ手游网站源码

介绍&#xff1a; 昨天在群聊中看到有人发 直接吧源码上次主机或者宝塔的根目录即可! 网盘下载地址&#xff1a; http://kekewl.net/gY8K11yEtyx 图片&#xff1a;

国内外教学交流合作网页模板是一款适合教育培训机构网站模板

介绍&#xff1a; 国内外教学交流合作网页模板是一款适合教育培训机构网站模板下载 网盘下载地址&#xff1a; http://kekewl.org/aZLRvloifqh 图片&#xff1a;