freeCodeCamp

3.5 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7157d8c242eddfaeb5bd13	Build a Markdown Previewer	true	3		构建Markdown预览器

Description

目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/GrZVVO 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我可以看到一个带有相应id="editor"的textarea元素。 用户故事＃2：我可以看到一个具有相应id="preview"的元素。 用户故事＃3：当我文本输入到#editor元件，所述#preview如I型显示textarea的内容元素被更新。 用户故事＃4：当我在#editor元素中输入GitHub风格的markdown时，文本在我输入的#preview元素中呈现为HTML（提示：您不需要自己解析Markdown - 您可以导入Marked库为此： https ： //cdnjs.com/libraries/marked ）。 用户故事＃5：当我的降价预览器首次加载时，＃ #editor字段中的默认文本应包含有效的markdown，它至少代表以下每个元素之一：标题（H1大小），子标题（H2大小），链接，内联代码，代码块，列表项，块引用，图像和粗体文本。 用户故事＃6：首次加载我的降价预览器时，＃ #editor字段中的默认降价应该在#preview元素中呈现为HTML。 可选的奖励（您不需要进行此测试通过）：我的降价预览器解释回车并将它们呈现为br （换行符）元素。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

3.5 KiB Raw Blame History Unescape Escape