首页 > 其他分享 >astro cherry-markdown 示例

astro cherry-markdown 示例

时间:2024-08-04 18:38:50浏览次数:13  
标签:markdown 示例 cherry strikethrough astro theme Cherry

cherry-markdown是一个TS编写的markdown编辑器。

---
import "cherry-markdown/dist/cherry-markdown.css";
---

<cherry-mark>
  <textarea></textarea>
</cherry-mark>

<script>
  import Cherry from "cherry-markdown";

  class CherryMark extends HTMLElement {
    constructor() {
      super();
      const area = this.querySelector("textarea")!;
      const cherryInstance = new Cherry({
        autoScrollByHashAfterInit: true,
        el: area,
        toolbars: {
          toolbar: [
            'bold',
            'italic',
            {
              strikethrough: ['strikethrough', 'underline', 'sub', 'sup', 'ruby', 'customMenuAName'],
            },
            'size',
            '|',
            'color',
            'header',
            '|',
            'drawIo',
            '|',
            'ol',
            'ul',
            'checklist',
            'panel',
            'justify',
            'detail',
            '|',
            'formula',
            {
              insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'inlineCode', 'formula', 'toc', 'table', 'pdf', 'word'],
            },
            'graph',
            'togglePreview',
            'settings',
            'codeTheme',
            'export',
            'theme',
          ],
          toolbarRight: ['fullScreen', '|', 'wordCount'],
          bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
          sidebar: ['mobilePreview', 'copy', 'theme', 'publish'],
          theme: "light",
        },
        value: "# Welcome to Cherry Markdown Editor"
      });
    }
  }

  customElements.define('cherry-mark', CherryMark);
</script>

标签:markdown,示例,cherry,strikethrough,astro,theme,Cherry
From: https://www.cnblogs.com/soarowl/p/18342069

相关文章

  • wkt格式文件详解(包含应用示例)
    还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。No.内容链接1Openlayers【入门教程】-......
  • 【机器学习】过拟合和欠拟合、高偏差(High Bias)和高方差(High Variance)的区别、过拟合和
    引言在机器学习中,过拟合(Overfitting)是指模型在训练数据上学习得太好,以至于它捕捉到了数据中的噪声和随机波动,而不是潜在的真实关系,这导致模型在新的、未见过的数据上表现不佳;欠拟合(Underfitting)是指模型在训练数据上未能捕捉到足够的信息或模式,导致模型在训练集和测试集上......
  • 使用epoll编写TCP服务器示例
    #include<stdio.h>#include<stdlib.h>#include<string.h>#include<errno.h>#include<netinet/in.h>#include<sys/socket.h>#include<arpa/inet.h>#include<sys/epoll.h>#include<unistd.h>#include......
  • ORM之SqlSugar简单示例
    示例结构 下面给出示例代码,安装编码框架可扩展IDal接口定义namespaceORMRepository{///<summary>///数据库访问接口///</summary>///<typeparamname="T"></typeparam>publicinterfaceIDal<T>{///<summary&......
  • 白盒测试基础与实践:Python示例及流程图设计
    文章目录前言一、白盒测试是什么?主要特点常用方法优点缺点二、白盒测试常用技术语句覆盖判定覆盖条件覆盖判定/条件覆盖条件组合覆盖路径覆盖三、程序流程图设计四、测试用例设计1.基本路径法2.语句覆盖3.判断覆盖4.条件覆盖5.判断/条件覆盖6.条件组合覆盖总结......
  • 压力测试(caliper具体步骤+示例)
    Caliper压力测试(具体步骤+示例)一、Caliper压力测试指南1.环境要求(1)配置基本环境部署Caliper的计算机需要有外网权限;解决方法:#通常情况下,DNS服务器由你的网络配置提供。你可以查看当前的DNS设置:cat/etc/resolv.confoot@thy-virtual-machine:/home/thy/fisc......
  • 【算法】浅析线性规划算法【附完整示例】
    线性规划算法:优化资源配置,提升经济效益1.引言在现代社会,资源优化配置是提高经济效益的关键。线性规划算法作为一种优化工具,广泛应用于经济学、工程学、管理学等领域。本文将带你了解线性规划算法的原理、使用方法及其在实际应用中的意义,并通过代码示例和图示帮助大家更好......
  • 基于 STM32 的 NAS私有云盘搭建:集成LwIP 协议、HTTP/HTTPS、WEB前端技术栈(代码示例)
    项目概述在本项目中,我们将搭建一个基于STM32的NAS(网络附加存储)私盘,通过网络访问存储在外部SATA硬盘上的文件。该项目将使用STM32开发板、外接SATA硬盘、LwIP协议栈以及FATFS文件系统来实现文件的上传、下载和管理,用户可以通过简单的Web界面进行操作。系统设计......
  • hostapd 配置文件示例
    b模式:2.4G20MHz#接口和驱动程序设置interface=wlan0driver=nl80211ctrl_interface=/var/run/hostapd​#基本网络设置ssid=TestAPhw_mode=bchannel=11​#WPA身份验证设置wpa=2wpa_key_mgmt=WPA-PSKwpa_passphrase=12345678​#加密算法设置wpa_pairwise=CCMP......
  • SpringCloud示例项目,使用的SpringBoot3.3.2
    先启动nacos:https://www.cnblogs.com/xsj1989/p/18323636特别注意,SpringBoot、SpringCloud、Openfeign等依赖的版本必须相匹配,不然会报各种错。具体版本对应关系看官网。或者看:https://start.spring.io/actuator/info父pom<?xmlversion="1.0"encoding="UTF-8"?><projectxmln......