模仿简书的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. 使用 application.properties 中配置的属性,举例:@Value("${server.port}")

    使用 application.properties 中配置的属性:@Value 注解. @RestController public class HelloWorldController { @Val ...

  2. vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)

    详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...

  3. abp记录1

    1在AbpWebApplication中的的构造函数中创建abpBootstrapper 实例,在Application_Start执行AbpBootstrapper值初始化方式 2AbpBootst ...

  4. 命令行的方式启动和关闭Mysql

    命令行的方式启动和关闭Mysql mysql -h 主机名 -P 端口号 -u 用户名 -p 密码 例如:mysql -h localhost -P 3306 -u root -p11111(p和密码 ...

  5. js沉思录一:js的核心概念

    js的核心概念: 原型.对象(Object).函数(Function); 原型:路由路径上非叶子结点的对象: 对象:无序属性(包括函数)的集合: 函数:函数上下文的集合: 原型: 原型的创建.指定.修 ...

  6. jmeter+ant+jenkins搭建接口自动化测试环境(基于win)

    1.jmeter jmeter依赖java运行环境,所以需要提前下载jdk并配置好环境变量 官网下载(http://jmeter.apache.org/download_jmeter.cgi),我用的 ...

  7. hadoop spark合并小文件

      一.输入文件类型设置为 CombineTextInputFormat hadoop job.setInputFormatClass(CombineTextInputFormat.class) sp ...

  8. ent facebook 开源的golang orm 框架

    ent 是facebook 开源的golang orm 框架,简单强大,具有提下特性 schema 即代码 方便的图遍历 静态类型以及显示api 多种存储引擎支持(当前是mysql,sqlite,以及 ...

  9. class-transformer 方便的json 对象转class

    在我们日常web开发中经常碰到需要json 到类的处理,因为json 就是普通的数据,没有处理能力,class 具有业务处理能力, 但是需要数据的支持,class-transformer 刚好做为了一 ...

  10. MongoDB主从

    环境示例: 系统:Centos6.6x64 安装目录:/opt/ 主:172.16.15.101 从:172.16.15.102 1.下载安装: # wget https://fastdl.mongo ...