PHP中如何实现Markdown的实时预览-117笔记问答

在 PHP 中实现 Markdown 的实时预览，可以使用 JavaScript 库（例如：marked.js）和 PHP 解析库（例如：Parsedown 或 Michelf PHP Markdown）结合来实现。

这里是一个简单的示例，展示了如何使用 Parsedown 和 marked.js 实现实时预览：

首先，下载并包含 Parsedown 库。你可以从这里下载：Parsedown。将 Parsedown.php 文件放入你的项目文件夹中。
创建一个名为 index.php 的文件，然后添加以下内容：




    
    
   Markdown Real-time Preview
   


   
    

    document.getElementById("markdown-input").value = 'https://www.yisu.com/ask/. json_encode($_POST['markdown']) . '; updatePreview();';
        }
    ?>

这个示例中，我们使用了一个文本区域（</code>）来输入 Markdown 文本，并在输入时实时更新预览。我们使用 marked.js 库将 Markdown 转换为 HTML，并将其显示在名为 “preview” 的 <code><div></code> 元素中。</p> <p>当用户单击 “Submit” 按钮时，表单将提交到 PHP 脚本，你可以在其中处理 Markdown 数据（例如将其保存到数据库中）。在这个示例中，我们只是将 Markdown 文本存储在一个隐藏的输入字段中，以便在页面重新加载时保留它。</p> <p>请注意，这个示例仅用于演示目的。在生产环境中，你需要对用户输入进行验证和清理，以确保安全性。</p> </article>  <div class="post-copyright">未经允许不得转载 » 本文链接：<a href="https://www.117.info/ask/fe9ecAzsBBA9TBQ.html">https://www.117.info/ask/fe9ecAzsBBA9TBQ.html</a></div>  <div class="article-tags"> <a href="https://www.117.info/ask/taglist/fe4d5ADsIAQ/" title="php">php</a></div>  <nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="https://www.117.info/ask/fe2f6AzsBBA9SDA.html" title="Markdown在PHP中的版本兼容性问题">Markdown在PHP中的版本兼容性问题</a></span> <span class="article-nav-next">下一篇<br><a href="https://www.117.info/ask/feeffAzsBBA9TBA.html" title="Markdown在PHP文档生成中的应用">Markdown在PHP文档生成中的应用</a></span> </nav> <div class="relates relates-textnoimg"> <div class="title"> <h3>推荐文章</h3> </div> <ul> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fe090AzsKAgdWAlI.html" title="php生成json怎样处理大数据" rel="bookmark">php生成json怎样处理大数据</a></h2> <p class="note">在PHP中生成JSON时，处理大数据需要考虑内存限制和执行时间限制。以下是一些建议来处理大数据：分批处理：将大数据分成较小的批次，每次处理一批数据，然后将结...</p> <div class="meta"> <time>2025-02-28 11:42</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fef9eAzsKAgdWAlE.html" title="php生成json如何优化速度" rel="bookmark">php生成json如何优化速度</a></h2> <p class="note">为了优化 PHP 生成 JSON 的速度，您可以尝试以下方法：使用 json_encode() 函数：这是 PHP 中用于将数组或对象转换为 JSON 格式的内置函数。它比手动构建 JSON ...</p> <div class="meta"> <time>2025-02-28 11:42</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fe6a7AzsKAgdWAlA.html" title="php生成json能加密吗" rel="bookmark">php生成json能加密吗</a></h2> <p class="note">PHP 生成的 JSON 数据本身不能直接加密，但您可以在将 JSON 数据发送给客户端之前对其进行加密。您可以使用各种加密算法（如 OpenSSL、AES 等）对 JSON 数据进行...</p> <div class="meta"> <time>2025-02-28 11:42</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fe522AzsKAgdWAlc.html" title="php生成json怎样保证准确" rel="bookmark">php生成json怎样保证准确</a></h2> <p class="note">要确保PHP生成的JSON数据的准确性，可以遵循以下几个步骤：确保数据来源可靠：首先，确保你从数据库或其他数据源获取的数据是准确和完整的。数据验证：在生成J...</p> <div class="meta"> <time>2025-02-28 11:42</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fe2f6AzsBBA9SDA.html" title="Markdown在PHP中的版本兼容性问题" rel="bookmark">Markdown在PHP中的版本兼容性问题</a></h2> <p class="note">Markdown 是一种轻量级标记语言，用于将普通文本转换为 HTML。在 PHP 中，有多个库可以用来解析和处理 Markdown，例如 Parsedown、Michelf PHP Markdown 和 Comm...</p> <div class="meta"> <time>2024-12-26 04:18</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fef69AzsBBA9SDQ.html" title="如何在PHP中处理Markdown的图片链接" rel="bookmark">如何在PHP中处理Markdown的图片链接</a></h2> <p class="note">在 PHP 中处理 Markdown 图片链接，你可以使用正则表达式来匹配和解析图片链接</p> <div class="meta"> <time>2024-12-26 04:15</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fe905AzsBBA9SAg.html" title="Markdown在PHP应用中的性能考虑" rel="bookmark">Markdown在PHP应用中的性能考虑</a></h2> <p class="note">在 PHP 应用中使用 Markdown 时，需要考虑以下几个方面的性能：解析速度：Markdown 解析器将 Markdown 文本转换为 HTML。不同的解析器性能可能有所不同，因此选...</p> <div class="meta"> <time>2024-12-26 04:15</time> </div> </li> <li class="excerpt"> <h2><a href="https://www.117.info/ask/fed20AzsBBA9SAw.html" title="PHP中如何自定义Markdown的扩展" rel="bookmark">PHP中如何自定义Markdown的扩展</a></h2> <p class="note">在 PHP 中，要自定义 Markdown 的扩展，你可以使用现有的 Markdown 解析库，例如 Parsedown 或 CommonMark，然后对其进行扩展以支持你需要的自定义功能。<br />以...</p> <div class="meta"> <time>2024-12-26 04:15</time> </div> </li> </ul> </div> </div> </div> <div class="sidebar">  <div class="widget-on-phone widget widget_ui_posts"> <h3>热门文章</h3> <ul class="nopic"> <li> <a href="https://www.117.info/ask/fe1c4AzsLAA8.html"> <span class="text">python爬虫怎样提高抓取准确性</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（17439）</span> </a> </li> <li> <a href="https://www.117.info/ask/fe6e2AzsOBwE.html"> <span class="text">java位运算能兼容不同平台吗</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（16670）</span> </a> </li> <li> <a href="https://www.117.info/ask/fee97AzsPAgU.html"> <span class="text">c# listview能做什么</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（10156）</span> </a> </li> <li> <a href="https://www.117.info/ask/feefeAzsMAgQ.html"> <span class="text">linux删除命令能删除文件吗</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（10057）</span> </a> </li> <li> <a href="https://www.117.info/ask/fef44AzsKBgA.html"> <span class="text">linux python如何调试代码</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（3461）</span> </a> </li> <li> <a href="https://www.117.info/ask/feea6AzsKAAQ.html"> <span class="text">数据库linux怎样安装</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（3272）</span> </a> </li> <li> <a href="https://www.117.info/ask/fe1a7AzsPCA.html"> <span class="text">数据库mongodb怎样安装</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（658）</span> </a> </li> <li> <a href="https://www.117.info/ask/fe5deAzsNCA.html"> <span class="text">数据库mysql集群怎样保证高可用</span> <span class="muted">2024-11-16</span> <span class="muted">阅读（584）</span> </a> </li> <li> <a href="https://www.117.info/ask/fe3aaAzsLAQFUDA.html"> <span class="text">sqlite数据库能存储多少数据</span> <span class="muted">2024-11-29</span> <span class="muted">阅读（529）</span> </a> </li> <li> <a href="https://www.117.info/ask/fe63dAzsIBwRXDQ.html"> <span class="text">ruststagingbranch和rust的区别有哪些</span> <span class="muted">2024-11-27</span> <span class="muted">阅读（459）</span> </a> </li> </ul> </div>  <div class="widget-on-phone widget widget_ui_tags"> <h3>热门标签</h3> <div class="items"> <a href="https://www.117.info/ask/taglist/fed27ADsI/" title="c">c</a> <a href="https://www.117.info/ask/taglist/fe1a1ADsN/" title="linux">linux</a> <a href="https://www.117.info/ask/taglist/fe349ADsL/" title="java">java</a> <a href="https://www.117.info/ask/taglist/fe4d5ADsIAQ/" title="php">php</a> <a href="https://www.117.info/ask/taglist/fe21cADsA/" title="python">python</a> <a href="https://www.117.info/ask/taglist/fe193ADsK/" title="mysql">mysql</a> <a href="https://www.117.info/ask/taglist/fe9bcADsO/" title="android">android</a> <a href="https://www.117.info/ask/taglist/fe86bADsKAQ/" title="oracle">oracle</a> <a href="https://www.117.info/ask/taglist/fe6baADsIBA/" title="ubuntu">ubuntu</a> <a href="https://www.117.info/ask/taglist/fec78ADsLAg/" title="sql">sql</a> <a href="https://www.117.info/ask/taglist/fea45ADsMCQ/" title="c语言">c语言</a> <a href="https://www.117.info/ask/taglist/fe4e6ADsIAw/" title="redis">redis</a> <a href="https://www.117.info/ask/taglist/feaaaADsIBw/" title="centos">centos</a> <a href="https://www.117.info/ask/taglist/fec75ADsKBQ/" title="kafka">kafka</a> <a href="https://www.117.info/ask/taglist/fe9a2ADsKBA9T/" title="win10">win10</a> <a href="https://www.117.info/ask/taglist/fe763ADsKAwM/" title="mybatis">mybatis</a> <a href="https://www.117.info/ask/taglist/fed33ADsBBw/" title="hive">hive</a> <a href="https://www.117.info/ask/taglist/fe105ADsIAwU/" title="hbase">hbase</a> <a href="https://www.117.info/ask/taglist/fef08ADsIAgBT/" title="云服务器">云服务器</a> <a href="https://www.117.info/ask/taglist/fec3cADsBAQ/" title="docker">docker</a> <a href="https://www.117.info/ask/taglist/feb2eADsB/" title="aspnet">aspnet</a> <a href="https://www.117.info/ask/taglist/fef8dADsMAg/" title="kotlin">kotlin</a> <a href="https://www.117.info/ask/taglist/fecc8ADsMBw/" title="go语言">go语言</a> <a href="https://www.117.info/ask/taglist/fe2f2ADsNBAU/" title="debian">debian</a> <a href="https://www.117.info/ask/taglist/feb8aADsP/" title="mongodb">mongodb</a> <a href="https://www.117.info/ask/taglist/fec69ADsKBA9R/" title="电脑">电脑</a> <a href="https://www.117.info/ask/taglist/fee06ADsIAAJe/" title="windows">windows</a> <a href="https://www.117.info/ask/taglist/fe800ADsKBwNQ/" title="win7">win7</a> <a href="https://www.117.info/ask/taglist/fe85dADsMBg/" title="ruby">ruby</a> <a href="https://www.117.info/ask/taglist/fe8b8ADsIAwRe/" title="r语言">r语言</a> <a href="https://www.117.info/ask/taglist/fe105ADsLBA/" title="hadoop">hadoop</a> <a href="https://www.117.info/ask/taglist/fea0fADsNAAM/" title="服务器">服务器</a> <a href="https://www.117.info/ask/taglist/fe3caADsIBg/" title="rust">rust</a> <a href="https://www.117.info/ask/taglist/fe6c9ADsMAw/" title="spark">spark</a> <a href="https://www.117.info/ask/taglist/fee6dADsOBA/" title="neo4j">neo4j</a> <a href="https://www.117.info/ask/taglist/fe5bdADsKAQU/" title="matlab">matlab</a> </div> </div> </div> </section> <footer class="footer" style=" border-top: 1px solid #eee;"> <div class="container"> <div class="flinks"> <ul class='xoxo blogroll'> <strong>友情</strong> <li><a href="https://www.benxiaoli.com/" rel="noopener" title="笨小狸" target="_blank">笨小狸</a></li> <li><a href="http://www.benxiaoben.com" rel="noopener" title="范文大全" target="_blank">范文大全</a></li> <li><a href="https://www.benxiaohu.com/" rel="noopener" title="笨小虎" target="_blank">笨小虎</a></li> <li><a href="https://www.13ks.com/" rel="noopener" title="在线工具大全" target="_blank">在线工具大全</a></li> </ul> </div> <p>©2024-2024 <a href="/">117笔记问答</a> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">冀ICP备09039152号-88</a> </p> </div> </footer> <div class="karbar karbar-rb"> <ul>  <li class="karbar-totop"><a rel="nofollow" href="javascript:(TBUI.scrollTo());"><i class="tbfa"></i><span>回顶部</span></a></li> </ul> </div> <script> window.TBUI = { "www": "https:\/\/www.117.info\/ask\/qux", "uri": "https:\/\/www.117.info\/ask\/view\/qux", "roll": "1" } </script> <script type='text/javascript' src='/ask/view/qux/js/loader.js' id='loader-js'></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?34953e7a11c071991ab5f581761c9e38"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>