PHP中如何实现Markdown的实时预览-乐工具技术知识

在 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.legongju.com/article/109141.html">https://www.legongju.com/article/109141.html</a></div> <div class="article-tags"> <a href="https://www.legongju.com/tag/2/" title="php">php</a></div> <nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="https://www.legongju.com/article/109140.html" title="Markdown在PHP中的版本兼容性问题">Markdown在PHP中的版本兼容性问题</a></span> <span class="article-nav-next">下一篇<br><a href="https://www.legongju.com/article/109142.html" title="Markdown在PHP文档生成中的应用">Markdown在PHP文档生成中的应用</a></span> </nav>  <div class="relates relates-textimg"> <div class="title"> <h3>相关推荐</h3> </div> <ul> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/111265.html" title="PHP进程的用户权限控制方案" rel="bookmark"> <img alt="PHP进程的用户权限控制方案" src="https://www.legongju.com/upload/images/tech36.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/111265.html" title="PHP进程的用户权限控制方案" rel="bookmark">PHP进程的用户权限控制方案</a></h2> <p class="note">在PHP中，用户权限控制是一个重要的安全问题。为了确保应用程序的安全性，需要对PHP进程的用户权限进行合理的控制。以下是一些建议的方案：使用最小权限原则：为...</p> <div class="meta"> <time>2025-01-15 09:45</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/111257.html" title="如何在PHP中使用array_values进行数据过滤" rel="bookmark"> <img alt="如何在PHP中使用array_values进行数据过滤" src="https://www.legongju.com/upload/images/tech313.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/111257.html" title="如何在PHP中使用array_values进行数据过滤" rel="bookmark">如何在PHP中使用array_values进行数据过滤</a></h2> <p class="note">在PHP中，array_values() 函数用于返回一个包含给定数组中所有值的新数组，键名从 0 开始并递增计数。你可以使用该函数来过滤数组中的值，下面是一个示例：<br /...</p> <div class="meta"> <time>2025-01-15 09:42</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/111256.html" title="如何结合array_values与其他数组函数使用" rel="bookmark"> <img alt="如何结合array_values与其他数组函数使用" src="https://www.legongju.com/upload/images/tech91.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/111256.html" title="如何结合array_values与其他数组函数使用" rel="bookmark">如何结合array_values与其他数组函数使用</a></h2> <p class="note">array_values() 函数用于返回一个包含数组中所有值的新数组。结合其他数组函数使用时，可以将其用作其他数组函数的参数，以获取更多有用的信息或进行进一步处理。...</p> <div class="meta"> <time>2025-01-15 09:39</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/111255.html" title="array_values函数在PHP数据处理中的优势" rel="bookmark"> <img alt="array_values函数在PHP数据处理中的优势" src="https://www.legongju.com/upload/images/tech247.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/111255.html" title="array_values函数在PHP数据处理中的优势" rel="bookmark">array_values函数在PHP数据处理中的优势</a></h2> <p class="note">array_values函数在PHP数据处理中的优势包括：重新索引数组：array_values函数可以返回一个新的数组，其中包含原始数组中的所有值，并且重新索引键值，使其以0开...</p> <div class="meta"> <time>2025-01-15 09:39</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/109140.html" title="Markdown在PHP中的版本兼容性问题" rel="bookmark"> <img alt="Markdown在PHP中的版本兼容性问题" src="https://www.legongju.com/upload/images/tech138.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/109140.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>2025-01-14 12:30</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/109139.html" title="如何在PHP中处理Markdown的图片链接" rel="bookmark"> <img alt="如何在PHP中处理Markdown的图片链接" src="https://www.legongju.com/upload/images/tech237.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/109139.html" title="如何在PHP中处理Markdown的图片链接" rel="bookmark">如何在PHP中处理Markdown的图片链接</a></h2> <p class="note">在 PHP 中处理 Markdown 图片链接，你可以使用正则表达式来匹配和解析图片链接</p> <div class="meta"> <time>2025-01-14 12:30</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/109138.html" title="Markdown在PHP应用中的性能考虑" rel="bookmark"> <img alt="Markdown在PHP应用中的性能考虑" src="https://www.legongju.com/upload/images/tech285.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/109138.html" title="Markdown在PHP应用中的性能考虑" rel="bookmark">Markdown在PHP应用中的性能考虑</a></h2> <p class="note">在 PHP 应用中使用 Markdown 时，需要考虑以下几个方面的性能：解析速度：Markdown 解析器将 Markdown 文本转换为 HTML。不同的解析器性能可能有所不同，因此选...</p> <div class="meta"> <time>2025-01-14 12:30</time> </div> </li> <li class="excerpt"> <a class="focus" href="https://www.legongju.com/article/109137.html" title="PHP中如何自定义Markdown的扩展" rel="bookmark"> <img alt="PHP中如何自定义Markdown的扩展" src="https://www.legongju.com/upload/images/tech158.jpg" class="thumb"> </a> <h2><a href="https://www.legongju.com/article/109137.html" title="PHP中如何自定义Markdown的扩展" rel="bookmark">PHP中如何自定义Markdown的扩展</a></h2> <p class="note">在 PHP 中，要自定义 Markdown 的扩展，你可以使用现有的 Markdown 解析库，例如 Parsedown 或 CommonMark，然后对其进行扩展以支持你需要的自定义功能。<br />以...</p> <div class="meta"> <time>2025-01-14 12:30</time> </div> </li> </ul> </div> </div> </div> <div class="sidebar"> <div class="widget-on-phone widget widget_ui_textorbui"> <a class="style02" href="#" target="_blank"><strong>值得看看</strong> <h2>欢迎访问本站</h2> <p>本站分享各种技术文章，如云计算，数据库，编程技术，大数据，人工智能等等技术文章，欢迎学习使用。</p> </a> </div> <div class="widget-on-phone widget widget_ui_posts"> <h3>热门文章</h3> <ul> <li> <a href="https://www.legongju.com/article/124.html"> <span class="thumbnail"><img alt="playwright java有啥优势" src="https://www.legongju.com/upload/images/tech56.jpg" class="thumb"></span> <span class="text">playwright java有啥优势</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（466）</span> </a> </li> <li> <a href="https://www.legongju.com/article/88.html"> <span class="thumbnail"><img alt="android onnewintent能干嘛用" src="https://www.legongju.com/upload/images/tech324.jpg" class="thumb"></span> <span class="text">android onnewintent能干嘛用</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（297）</span> </a> </li> <li> <a href="https://www.legongju.com/article/73.html"> <span class="thumbnail"><img alt="java metaspace为何会自动扩展" src="https://www.legongju.com/upload/images/tech11.jpg" class="thumb"></span> <span class="text">java metaspace为何会自动扩展</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（281）</span> </a> </li> <li> <a href="https://www.legongju.com/article/102.html"> <span class="thumbnail"><img alt="android onnewintent如何调试" src="https://www.legongju.com/upload/images/tech43.jpg" class="thumb"></span> <span class="text">android onnewintent如何调试</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（276）</span> </a> </li> <li> <a href="https://www.legongju.com/article/94.html"> <span class="thumbnail"><img alt="android audiomanager有何优势" src="https://www.legongju.com/upload/images/tech114.jpg" class="thumb"></span> <span class="text">android audiomanager有何优势</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（273）</span> </a> </li> <li> <a href="https://www.legongju.com/article/120.html"> <span class="thumbnail"><img alt="python pip命令能卸载包吗" src="https://www.legongju.com/upload/images/tech51.jpg" class="thumb"></span> <span class="text">python pip命令能卸载包吗</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（267）</span> </a> </li> <li> <a href="https://www.legongju.com/article/98.html"> <span class="thumbnail"><img alt="android onnewintent能做啥" src="https://www.legongju.com/upload/images/tech273.jpg" class="thumb"></span> <span class="text">android onnewintent能做啥</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（252）</span> </a> </li> <li> <a href="https://www.legongju.com/article/77.html"> <span class="thumbnail"><img alt="java metaspace为何会导致性能下降" src="https://www.legongju.com/upload/images/tech56.jpg" class="thumb"></span> <span class="text">java metaspace为何会导致性能下降</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（245）</span> </a> </li> <li> <a href="https://www.legongju.com/article/75.html"> <span class="thumbnail"><img alt="java metaspace怎样解决内存泄漏" src="https://www.legongju.com/upload/images/tech148.jpg" class="thumb"></span> <span class="text">java metaspace怎样解决内存泄漏</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（237）</span> </a> </li> <li> <a href="https://www.legongju.com/article/109.html"> <span class="thumbnail"><img alt="rust egui有哪些集成方法" src="https://www.legongju.com/upload/images/tech292.jpg" class="thumb"></span> <span class="text">rust egui有哪些集成方法</span> <span class="muted">2024-11-21</span> <span class="muted">阅读（236）</span> </a> </li> </ul> </div> <div class="widget-on-phone widget widget_ui_tags"> <h3>热门标签</h3> <div class="items"> <a href="https://www.legongju.com/tag/3/" title="c">c</a> <a href="https://www.legongju.com/tag/2/" title="php">php</a> <a href="https://www.legongju.com/tag/1/" title="linux">linux</a> <a href="https://www.legongju.com/tag/13/" title="java">java</a> <a href="https://www.legongju.com/tag/14/" title="android">android</a> <a href="https://www.legongju.com/tag/15/" title="python">python</a> <a href="https://www.legongju.com/tag/10/" title="redis">redis</a> <a href="https://www.legongju.com/tag/5/" title="mysql">mysql</a> <a href="https://www.legongju.com/tag/41/" title="oracle">oracle</a> <a href="https://www.legongju.com/tag/23/" title="ubuntu">ubuntu</a> <a href="https://www.legongju.com/tag/12/" title="sql">sql</a> <a href="https://www.legongju.com/tag/39/" title="c语言">c语言</a> <a href="https://www.legongju.com/tag/33/" title="aspnet">aspnet</a> <a href="https://www.legongju.com/tag/66/" title="kotlin">kotlin</a> <a href="https://www.legongju.com/tag/22/" title="go语言">go语言</a> <a href="https://www.legongju.com/tag/6/" title="rust">rust</a> <a href="https://www.legongju.com/tag/69/" title="ruby">ruby</a> <a href="https://www.legongju.com/tag/16/" title="neo4j">neo4j</a> <a href="https://www.legongju.com/tag/346/" title="mybatis">mybatis</a> <a href="https://www.legongju.com/tag/81/" title="docker">docker</a> <a href="https://www.legongju.com/tag/7/" title="mongodb">mongodb</a> <a href="https://www.legongju.com/tag/79/" title="arangodb">arangodb</a> <a href="https://www.legongju.com/tag/17/" title="orientdb">orientdb</a> <a href="https://www.legongju.com/tag/45/" title="kafka">kafka</a> <a href="https://www.legongju.com/tag/65/" title="spark">spark</a> <a href="https://www.legongju.com/tag/34/" title="adb">adb</a> <a href="https://www.legongju.com/tag/50/" title="sql server">sql server</a> <a href="https://www.legongju.com/tag/80/" title="ios">ios</a> <a href="https://www.legongju.com/tag/31/" title="asp">asp</a> <a href="https://www.legongju.com/tag/155/" title="jquery">jquery</a> <a href="https://www.legongju.com/tag/76/" title="javascript">javascript</a> <a href="https://www.legongju.com/tag/174/" title="js">js</a> <a href="https://www.legongju.com/tag/463/" title="spring boot">spring boot</a> <a href="https://www.legongju.com/tag/143/" title="spring">spring</a> <a href="https://www.legongju.com/tag/27/" title="postgresql">postgresql</a> <a href="https://www.legongju.com/tag/11/" title="云数据库">云数据库</a> <a href="https://www.legongju.com/tag/4/" title="centos">centos</a> <a href="https://www.legongju.com/tag/244/" title="winform">winform</a> <a href="https://www.legongju.com/tag/77/" title="swift">swift</a> <a href="https://www.legongju.com/tag/236/" title="net">net</a> <a href="https://www.legongju.com/tag/19/" title="hadoop">hadoop</a> <a href="https://www.legongju.com/tag/21/" title="laravel">laravel</a> <a href="https://www.legongju.com/tag/78/" title="cypher">cypher</a> <a href="https://www.legongju.com/tag/435/" title="hashmap">hashmap</a> <a href="https://www.legongju.com/tag/82/" title="shell">shell</a> <a href="https://www.legongju.com/tag/29/" title="sqlserver">sqlserver</a> <a href="https://www.legongju.com/tag/36/" title="unix">unix</a> <a href="https://www.legongju.com/tag/109/" title="css">css</a> <a href="https://www.legongju.com/tag/25/" title="db2">db2</a> <a href="https://www.legongju.com/tag/26/" title="数据库">数据库</a> <a href="https://www.legongju.com/tag/325/" title="matlab">matlab</a> <a href="https://www.legongju.com/tag/18/" title="pytorch">pytorch</a> <a href="https://www.legongju.com/tag/320/" title="springboot">springboot</a> <a href="https://www.legongju.com/tag/40/" title="perl">perl</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="http://www.laobu.org" rel="noopener" title="大小写数字转换" target="_blank">大小写数字转换</a></li> <li><a href="https://www.legongju.com/tag/21/" rel="noopener" title="laravel" target="_blank">laravel</a></li> <li><a href="https://www.legongju.com/tag/18/" rel="noopener" title="pytorch" target="_blank">pytorch</a></li> </ul> </div> <p>© 2010-2023 <a href="/">乐工具技术知识</a> 分享各种IT技术知识，希望对您有用。</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.legongju.com\/qux", "uri": "https:\/\/www.legongju.com\/view\/qux", "roll": "1" } </script> <script type='text/javascript' src='/view/qux/js/loader.js' id='loader-js'></script> </body> </html>