首页 > 其他分享 >利用ace编辑并预览markdown

利用ace编辑并预览markdown

时间:2024-08-09 10:05:09浏览次数:9  
标签:markdown 预览 ACE content ace session editor

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>ACE in Action</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div style="display: flex; height: 40vh;">
        <div style="flex: 50%">
            <div id="editor" style="width: 100%; height: 100%;"># ACE in Action</div>
        </div>
        <div style="flex: 50%">
            <div id="previewer" style="width: 100%; height: 100%; overflow: scroll;"></div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.4/ace.min.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.0.0/marked.min.js" type="text/javascript"
        charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/markdown");
        editor.session.on('change', function (delta) {
            const content = editor.getValue();
            document.querySelector("#previewer").innerHTML = marked.marked(content);
        });
    </script>
</body>

</html>

标签:markdown,预览,ACE,content,ace,session,editor
From: https://www.cnblogs.com/soarowl/p/18350247

相关文章

  • 如何从我的 Python 应用程序更新我的 Facebook Business 令牌?
    我有一个使用FacebookBusiness库的Python应用程序。因此,我需要使用Facebook提供的令牌来访问我的见解并操纵它们。但是,这个令牌有一个很长的到期日期,但我想知道是否有办法自动更新这个令牌在我的应用程序中,这样它就不会停止运行。当然可以!你可以使用Facebook提......
  • ftrace的trace_options
    ftrace中的trace_options选项用于控制追踪数据的收集和显示方式。你可以通过/sys/kernel/debug/tracing/trace_options文件来设置这些选项。每个选项代表了不同的追踪行为或输出格式。以下是一些常见的trace_options选项及其含义:overwrite:含义:当启用此选项时,如果缓冲......
  • AppleScript实现FaceTime数据检测,FaceTime蓝号检测,无痕检测是否开通FaceTime功能
    FaceTime是苹果公司iOS和macOS(以前称MacOSX或OSX)内置的一款视频通话软件,通过Wi-Fi或者蜂窝数据接入互联网,在两个装有FaceTime的设备之间实现视频通话。其要求通话双方均具有装有FaceTime的苹果设备,苹果ID以及可接入互联网的3G/4G/5G或者Wi-Fi网络。 一、Windows电脑上部署苹......
  • Oracle系列---【磁盘有空间,但是报unable to extend index ... by 128 in tablespace C
    一、Oracle表空间满了的问题可能出现在以下几个方面1.数据文件达到最大大小限制:即使启用了自动扩展,数据文件可能已经达到了其最大大小设置。2.缺乏可用磁盘空间:尽管您提到数据目录有空间,但仍需要确认相关磁盘卷是否有足够的可用空间。3.自动扩展配置问题:检查自动扩展是否配置......
  • VsCode C++ namespace has no member错误
    此问题VSCode C++插件本身bug解决办法一:还原c++插件到旧版本解决方法二:但此方法智能提示会有很多多余的信息(有缺陷)在官方未推出相应布丁之前,可按照以下步骤避免该问题:1、按顺序打开:文件》首选项》设置2、在右边,用户设置窗口添加以下代码:"C_Cpp.intelliSenseEngine":"TagP......
  • VS Code 提示 namespace “std“ has no member “***“ 解决方法
    问题:自己编写的代码没有问题,能够编译和运行,但是vscode一直向我显示错误信息,提示namespace"std"hasnomember"***"。解决方案:在 VSCode 打开c_cpp_properties.json文件,将cStandard和cppStandard改成统一标准:"cStandard":"c11","cppStandard":"c++11",......
  • java集成onlyoffice实现文档在线预览编辑
    一、onlyoffice是什么ONLYOFFICE是一款由AscensioSystemSIA公司开发的在线办公软件套件,它提供了文档编辑、电子表格、演示文稿和表单等多种办公工具,旨在提高团队协作效率和文档处理的便捷性。以下是关于ONLYOFFICE的详细介绍:1、软件概述名称:ONLYOFFICE文档(英文名ONLYOFFIC......
  • Acetylcarnitine 是一种内源性代谢产物 |MedChemExpress (MCE)
    CAS:14992-62-2品牌:MedChemExpress(MCE)存储条件:4°C,protectfromlight,storedundernitrogen*Insolvent:-80°C,6months;-20°C,1month(protectfromlight,storedundernitrogen)生物活性:Acetylcarnitine是一种内源性代谢产物。 参考详情:Acetylcarni......
  • 告别Hugging Face模型下载难题:掌握高效下载策略,畅享无缝开发体验
    告别HuggingFace模型下载难题:掌握高效下载策略,畅享无缝开发体验Huggingface国内开源镜像:https://hf-mirror.com/里面总结了很多下载的方法,下面进行一一讲解方法一:网页下载在模型主页的FilesandVersion中中可以获取文件的下载链接。无需登录直接点击下载,还可以复制下载......
  • 使用monaco编辑预览markdown文件
    本打算使用remark来解析markdown的,但vite无论如何都不能编译成功,总是缺少一堆相关依赖,并且npm上还找不到相关的包,估计是版本依赖关系问题,暂时没时间来检查修改问题,遂采用marked来解析。<div>toolbar</div><divstyle="display:flex;height:40vh"><divstyle="flex......