模仿简书的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. SpringDataJPA开发环境的搭建

    这里简单的介绍一下使用maven工程创建SpringDataJPA的开发环境的搭建 首先引入依赖 <dependencies> <!-- junit单元测试 --> <d ...

  2. Java Mail 异常

    Java Mail 异常 java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream 解决方案: 把Jar包换一个比较高的版本就 ...

  3. python基础语法6 名称空间与作用域

    目录: 1.函数对象 2.函数嵌套 3.名称空间 4.作用域 函数是第一类对象 1.函数名是可以被引用: def index(): print('from index') a = index a() ...

  4. Ofbiz项目学习——阶段性小结——服务返回结果

    一.返回成功 1.在.DispatcherReturnDemoService类中编写服务[returnSuccess],内容如下: /** * 返回成功结果 * @param dctx * @para ...

  5. python 查询文件存放地址

    import os, time import sys import re def search(path,name): for root, dirs, files in os.walk(path): ...

  6. http协议 | http缓存

    缓存控制 1.禁止进行缓存:缓存中不得存储任何关于客户端请求和服务端响应的内容.每次由客户端发起的请求都会下载完整的响应内容. Cache-Control: no-store Cache-Contro ...

  7. Nuxt项目支持import写法的最新解决方案

    最近在看Nuxt开发vue项目的视频,视频中讲到Nuxt项目不支持es6的import写法.并提供了解决方案: 1.在package.json中添加我标红的部分: "scripts" ...

  8. 项目(1-2)ES32获取mpu9250传入数据库

    . 报一个错,找不到min函数 #define min(X,Y) ((X) < (Y) ? (X) : (Y)) 手动添加 之后不报错了 .最原始的采集 /******************* ...

  9. ansible 批量部署准备工作

    Ansible:自动化运维工具,基于Python开发 功能{ 批量系统配置 批量程序部署 批量运行命令等等 } 准备工作: 一.操作主机安装epel源 和 ansible工具 yum -y insta ...

  10. yugabyte cdc 试用

    目前yugabyte 的cdc 功能处于beta 阶段,应该也快实际可用了,以下是一个简单的试用 环境准备 使用docker-compose docker-compose 文件 version: '2 ...