模仿简书的MarkDown编辑器,使用Angular8写的示例

1.支持同步滚动

编辑的过程中,右侧预览界面会同步滚动。滚动右侧预览界面,左侧编辑区也会同步滚动哦

2.支持语法高亮

如下:

using System.IO.Compression;

#pragma warning disable 414, 3021

namespace MyApplication
{
[Obsolete("...")]
class Program : IInterface
{
public static List<int> JustDoIt(int count)
{
Console.WriteLine($"Hello {Name}!");
return new List<int>(new int[] { 1, 2, 3 })
}
}
}

3. 使用Angular8完成

执行以下命令观看本demo

npm i
npm start

源代码下载

仿简书MarkDown编辑器可同步滚动的更多相关文章

  1. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  2. 使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉载入很多其它

    一.概述 本篇博客介绍的是怎样使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉载入很多其它的效果. 依据效果图能够发现,本案例实现了例如以 ...

  3. 简书markdown教程

    1 支持 Markdown 的编辑器 Windows 推荐 Sublime Text 3,强大优雅的编辑器.MarkdownPad,一款可以直接预览排版效果的编辑器. Mac 推荐 Ulysess,专 ...

  4. 仿简书、淘宝等等App的View弹出效果

    昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...

  5. 仿简书分享:UIActivityViewController系统原生分享

    接下来介绍UIActivityViewController: 1. 创建要分享的数据内容,加在一个数组 ActivityItems里. NSString *textToShare = @"我 ...

  6. 简书 markdown 代码高亮标记

    SyntaxHighlight language language_key 1C 1c ActionScript actionscript Apache apache AppleScript a pp ...

  7. React 练习项目,仿简书博客写作平台

    Introduction 技术栈:react + redux + react-router + express + Nginx 练习点: redux 连接 react-router 路由跳转 scss ...

  8. 10个免费的在线Markdown编辑器

    1. StackEdit StackEdit是一个很用特色的免费在线Markdown编辑器. 有一个非常不错的工具栏,可与云存储同步,以URL形式导入文件或者直接从硬盘打入.他还有一个亮点就是,可以减 ...

  9. WPF系列教程——(一)仿TIM QQ界面 - 简书

    原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...

随机推荐

  1. 后端将Long类型数据传输到前端出现精度丢失的问题

    当将超过16位的数字传输到前端的时候,就会出现精度丢失的问题,然后我按照网上的几种方法实验的时候,只有一种方法成功了.可能是因为环境等方面的问题. 我这里成功是因为:最后使用的是配置mvc的方式,然后 ...

  2. 24、python re正则表达式模块

    一.re模块的基本使用 Python里数量词默认是贪婪的,总是尝试匹配尽可能多的字符.正则表达式是用来匹配处理字符串的. 假如你需要匹配文本中的字符\,Python里的使用原生字符串表示:r'\\'表 ...

  3. 磁盘提示“X:拒绝访问”问题解决

    cacls "D:\*.*" /T /E /G Administrators:F cacls "D:\*.*" /T /E /G Users:F cacls & ...

  4. spark调优——数据倾斜

    Spark中的数据倾斜问题主要指shuffle过程中出现的数据倾斜问题,是由于不同的key对应的数据量不同导致的不同task所处理的数据量不同的问题. 例如,reduce点一共要处理100万条数据,第 ...

  5. 第9章 MyBatis的关系映射

    在实际开发中,对数据库的操作通常涉及多张表,涉及了对象和对象之间的关联关系.针对多表之间的操作,MyBatis提供了关联映射,通过关联映射就可以很好的处理对象与对象之间的关联关系 9.1 关联关系概述 ...

  6. 部署django到服务器

    部署 服务器环境配置 在本地的虚拟环境中,项目根目录下,执行命令收集所有的包 pip freeze > plist.txt 安装并创建虚拟环境,如已创建则跳过此步 sudo apt-get in ...

  7. mpvue图片上传

    mpvue小程序项目中的图片上传 我的csdn博客地址:https://blog.csdn.net/zmkyf1993 一般我是优先更新csdn内容,然后在拷过来的. 效果图 通过mpvue文档得知他 ...

  8. ln -s 使用

    最近开发项目中遇到一个问题,网站上传文件到项目根目录下的upload文件夹,但是每次项目发布都会把upload文件夹删除掉,所以我们需要把upload文件夹放在系统目录下而不是项目根目录下. 访问的时 ...

  9. 转载:关于思科交换机、路由器如何关闭telnet 开启ssh服务

    等保测评要求: 必须关闭telnet服务,开启ssh服务 即用ssh方式登录网络设备,而不允许用telnet. 输入密码.en 再次输入密码.sh run 这些常规动作就不再赘述. 1.关闭telne ...

  10. 定时任务、js定时任务

    intervalID =setInterval("getIsCookie()",1000); //开始任务 clearInterval(intervalID);//停止任务