模仿简书的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. Gradle 学习资料

    Gradle 学习资料 网址 Gradle 使用指南 http://wiki.jikexueyuan.com/project/gradle/ 寄Android开发Gradle你需要知道的知识 http ...

  2. 限制textarea 文本框的长度(收集了几个办法)

    文章参考地址:http://blog.csdn.net/nhconch/article/details/4223076 需求背景: 前几天,因为客户有一个需求说,需要对一个评论(一个textarea文 ...

  3. Gym - 101848D:XOR(线性基 欧拉降幂)

    题意:给定N,K,P,表示现在有一个集合{0, 1, ..., 2n - 1},问有多少个非空子集的异或和为K: 答案%P.(1 ≤ n ≤ 1018, 0 ≤ k ≤ min(2n - 1, 101 ...

  4. Gym-101242B:Branch Assignment(最短路,四边形不等式优化DP)

    题意:要完成一个由s个子项目组成的项目,给b(b>=s)个部门分配,从而把b个部门分成s个组.分组完成后,每一组的任 意两个点之间都要传递信息.假设在(i,j)两个点间传送信息,要先把信息加密, ...

  5. ssm批量删除

    ssm批量删除 批量删除:顾名思义就是一次性删除多个.删除是根据前台传给后台的id,那么所谓批量删除,就是将多个id传给后台,那么如何传过去呢,前后台的交互该如何实现? 1.jsp页面,先选中所有的要 ...

  6. django-评论

    视图函数views.py # 订单评论 class OrderCommentView(View): def get(self, request, order_id): # 获取用户信息 user = ...

  7. css实现步骤条(未封装组件)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. A*G`C002

    AGC002 A Range Product 不会,弃疗了/kk https://agc002.contest.atcoder.jp/submissions/7908938 B Box and Bal ...

  9. 计蒜客 41387.XKC's basketball team-线段树(区间查找大于等于x的最靠右的位置) (The Preliminary Contest for ICPC Asia Xuzhou 2019 E.) 2019年徐州网络赛

    XKC's basketball team XKC , the captain of the basketball team , is directing a train of nn team mem ...

  10. 在 Ubuntu/Debian 下安装 PHP7.3 教程

    介绍 最近的 PHP 7.3.0 已经在 2018 年12月6日 发布 GA,大家已经可以开始第一时间体验新版本了,这里先放出 PHP7.3 安装的教程以便大家升级. 适用系统: Ubuntu 18. ...