V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
summerLast
V2EX  ›  分享创造

5 行代码让 markdown 支持变量

  •  
  •   summerLast ·
    weekend-project-space · 2023-07-06 10:40:08 +08:00 · 3387 次点击
    这是一个创建于 499 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目地址

    效果

    代码

    <textarea rows="20" class="textarea"></textarea>
    <div class="result"></div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    
    const selectElement = document.querySelector('textarea');
    
    function mdx(str) {
      if (str.indexOf("------") > 0) {
        let v = str.split("------");
        str = eval(v[0] + "`" + v[1] + "`");
      }
      return str.trim();
    }
    
    selectElement.addEventListener('change', (event) => {
      const result = document.querySelector('.result');
      result.innerHTML =
          marked.parse(mdx(event.target.value));
    });
    
    21 条回复    2023-07-07 16:44:25 +08:00
    duke807
        1
    duke807  
       2023-07-06 11:03:57 +08:00 via Android   ❤️ 2
    坐等 op 被骂
    summerLast
        2
    summerLast  
    OP
       2023-07-06 11:22:58 +08:00
    @duke807 啊?,标题党?
    kylebing
        3
    kylebing  
       2023-07-06 11:30:46 +08:00
    @duke807 #1 这跟在 支付宝 中添加 视频 有异曲同工之妙
    iOCZ
        4
    iOCZ  
       2023-07-06 11:32:58 +08:00
    一行代码让 markdown 支持代码高亮
    littleBink
        5
    littleBink  
       2023-07-06 11:47:46 +08:00
    建议移动到 [搞笑] 分区
    xiaoxiaoming01
        6
    xiaoxiaoming01  
       2023-07-06 12:52:37 +08:00 via Android   ❤️ 1
    我太菜了没看明白,op 能补充一下具体的作用吗?🤔
    x86
        7
    x86  
       2023-07-06 12:57:38 +08:00
    相当于特斯拉出增程版的了
    Light3
        8
    Light3  
       2023-07-06 13:04:51 +08:00   ❤️ 1
    建议下次出一个 一行代码 把原神嵌入任何可以写代码的地方
    CHTuring
        9
    CHTuring  
       2023-07-06 15:04:52 +08:00
    其实我没看到这是什么操作
    summerLast
        10
    summerLast  
    OP
       2023-07-06 15:16:56 +08:00
    @CHTuring data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>

    然后复制上面代码运行看下效果
    shuxhan
        11
    shuxhan  
       2023-07-06 15:28:32 +08:00
    槽点太多...
    突然想到抖音一个视频,10 行代码写个英雄联盟,然后噌噌噌引入一堆 js 文件
    ipwx
        12
    ipwx  
       2023-07-06 15:39:25 +08:00
    它来了,XSS 它来了,他带着 Markdown 走着最妖艳的步伐来了。
    abear
        13
    abear  
       2023-07-06 16:01:12 +08:00
    @shuxhan 不要吐槽不要吐槽,万一哪天就想到更好的点子了呢
    Vegetable
        14
    Vegetable  
       2023-07-06 16:13:08 +08:00
    使用 eval 操作有一定的想法, 但是如果我祭出 jinja2, 阁下是否会觉得我技高一筹
    mXw
        15
    mXw  
       2023-07-06 16:27:10 +08:00
    str = eval(v[0] + "`" + v[1] + "`"); // xss
    jfj8848
        16
    jfj8848  
       2023-07-06 16:31:59 +08:00
    什么意思,我写一个产品的文档,如果前面的变量定义产品名称,后面产品名称都用这个变量?生成 html 的时候,变量的地方可以直接变成产品名称?
    NICE20991231
        17
    NICE20991231  
       2023-07-06 17:31:31 +08:00
    总之,6...
    idealhs
        18
    idealhs  
       2023-07-06 17:41:01 +08:00
    啥时候 Word 也支持变量
    lhbc
        19
    lhbc  
       2023-07-06 17:48:38 +08:00
    一行代码开发一个 Google 搜索引擎
    `<iframe src="https://www.google.com" style="width: 100%; height: 100vh; border: none;"></iframe>`
    pkoukk
        20
    pkoukk  
       2023-07-06 18:48:10 +08:00   ❤️ 1
    你用代码,通过 string template 生成 markdown 不就完了么?
    为什么要在 markdown 生成完成之后,再通过 js 去修改它???
    楼上说的特斯拉改增程,你别说还挺贴切
    jaylee4869
        21
    jaylee4869  
       2023-07-07 16:44:25 +08:00
    为什么不直接用 MDX ?? https://mdxjs.com/ Vercel 出品。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2655 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:26 · PVG 18:26 · LAX 02:26 · JFK 05:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.