模仿简书的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. ECHO命令输出空行的11种方法和效率

    标题: 批处理技术内幕:ECHO命令作者: Demon链接: http://demon.tw/reverse/cmd-internal-echo.html版权: 本博客的所有文章,都遵守“署名-非商业 ...

  2. 项目Alpha冲刺(团队)-博客汇总

    格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队) 团队名称:为了交项目干杯 作业目标:集中记录所有敏捷冲刺日志的集合 团队信息 队员学号 队员姓名 个人博客地 ...

  3. 软件测试之Monkey 初步了解(入门级II)

    1. 先熟悉monkey基本命令: cls   清除 首先测试设备是否连接成功,在命令行中输入:adb devices 查看adb版本: adb version 查看虚拟机版本:nox_adb ver ...

  4. 如何保护你的 Python 代码 (一)—— 现有加密方案

    https://zhuanlan.zhihu.com/p/54296517 0 前言 去年11月在PyCon China 2018 杭州站分享了 Python 源码加密,讲述了如何通过修改 Pytho ...

  5. 编程语言的类型修饰符modifiers

    编程语言修饰符,代表语言要素与常规表达不同的语义: 这些语义的不同需要编译器和运行时作出不同的解释: 作用域.访问: 生命周期: 同步异步: 多态: 纯函数: 注解: 懒加载: 编译器合成:

  6. react语法注意事项

    组件: var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.n ...

  7. apollo报:系统出错,请重试或联系系统负责人

    说明:基于 docker 搭建的 apollo,创建项目后一直报系统出错,请重试或联系系统负责人错误. 项目人员列表一直空白: 经排查是数据库配置参数不匹配,由于自己的虚拟机 ip 为 192.168 ...

  8. LeetCode 325. Maximum Size Subarray Sum Equals k

    原题链接在这里:https://leetcode.com/problems/maximum-size-subarray-sum-equals-k/ 题目: Given an array nums an ...

  9. MySQL 8.0.18 InnoDB Cluster 主从(MGR)完整安装配置

    提示: MySQL InnoDB Cluster底层依赖Group Replication模式,至少3台机器 1.  准备3台 CentOS Linux 7 (Core), 修改各主机名:db-hos ...

  10. git 提交代码报错failed to push some refs to 解决笔记

    Administrator@SC- MINGW64 /e/gitrepository (master) $ git push django master To github.com:zgc137/dj ...