实现一个 Code Pen:(一)项目初始化

sxkk20082年前知识分享323

前言

前段时间掘金上线了一个新功能 Code pen,可以在线写代码,浏览器就可以运行预览,在文章中就可以插入代码片段,对 web 开发者大有裨益,非常方便读者对文章的理解,笔者对这种在线实时编辑的功能充满了好奇,所以打算开发一个简易的 Code pen。

技术栈

  • Next.js
  • Tailwindcss
  • Uniapp 云数据库

初始化项目

使用以下命令初始化一个 next 项目

npx create-next-app next-code-pen
cd next-code-pen

安装 tailwindcss 相关包,初始化 tailwind.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改 tailwind.config.js 配置,将代码移动到src目录下,这个是我的个人偏好

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

页面结构

用 Tailwind 来实现一个页面

有个好的 logo 才可以开始一个好的项目

<div className="flex justify-center items-center h-16 w-28">
  <svg
    className="w-10 h-10"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M512 341.33333336c0-94.4 76.8-171.2 171.2-171.2 94.4 0 171.2 76.8 171.2 171.2s-76.8 171.2-171.2 171.2C588.8 512.53333336 512 435.73333336 512 341.33333336z"
      fill="#FF3C41"
    >path>
    <path
      d="M171.2 682.13333336c0-94.4 76.8-171.2 171.2-171.2H512v171.2C512 776.53333336 435.2 853.33333336 340.8 853.33333336s-169.6-76.8-169.6-171.2z"
      fill="#0EBEFF"
    >path>
    <path
      d="M171.2 341.33333336c0 94.4 76.8 171.2 171.2 171.2H512V170.13333336H340.8c-94.4 0-169.6 76.8-169.6 171.2z"
      fill="#FCD000"
    >path>
    <text fill="#fff" x="520" y="860" fontFamily="Verdana" fontSize="460">+text>
  svg>
  <span className="ml2 text-gray-50">CODEspan>
div>

效果

logo

这个 logo 部分来源figma,后面再加一个+,意味着后我们可以从它开始一些五彩斑斓的项目。

页面主体部分

我们先安装 react-split-pane, 把我们的页面拆分成几块,分为 HTML,CSS,JS,可以拖拽视窗大小,这个包依赖版本是 react16, 由于 react 是平滑升级,所以可以强制安装

npm i react-split-pane --force

使用 react-split-pane ,初始化页面结构, react-split-pane 是将页面拆分成 2 块,若要拆分成 3 块的话,要使用 2 次。

<SplitPane defaultSize="50%" split="vertical">
  <SplitPane split="horizontal" defaultSize="33%">
    <div className="overflow-hidden flex flex-col w-full">div>
    <SplitPane split="horizontal" defaultSize="50%">
      <div className="overflow-hidden flex flex-col  h-full w-full">div>
      <div className="overflow-hidden flex flex-col h-full w-full">div>
    SplitPane>
  SplitPane>
  <div className="bg-red-50 h-full overflow-hidden">div>
SplitPane>

效果

拖拽效果

预览地址:https://code.runjs.cool/pen/create

代码仓库:https://github.com/maqi1520/next-code-pen

至此项目初始化成功, 接下来将介绍 在 next 项目中使用 Monaco Editor,Monaco Editor 是 VS Code 中使用的开源代码编辑器, 拥有代码高亮和代码自动补全的功能。

若对你有帮助记得点个 star,感谢!

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

本文首发掘金平台,来源Ai知识分享博客

相关文章

AI技术城市:下一站何方?

AI技术城市:下一站何方?

  人工智能技术在全球范围内广泛应用。越来越多的城市开始将其视为发展的新引擎,创造具有全球竞争力的AI技术城市,并将人工智能的应用融入到城市的各个领域中去。本文聚焦于AI技术...

智能家居行业:改变生活方方面面

智能家居行业:改变生活方方面面

  智能家居行业的发展与创新在过去几年里突飞猛进,逐渐改变了我们的生活方式。智能家居系统通过连接和控制家庭设备,使得我们的生活更加安全、便利和舒适。  首先,智能家居系统提供...

百度图片识别使用指南:高效识别AI技术助力图像处理

百度图片识别使用指南:高效识别AI技术助力图像处理

  随着人工智能技术的不断发展,图像识别已经成为了许多领域中不可或缺的一环。而百度图片识别作为一项先进的在线工具,为我们提供了一种高效、准确的图像识别解决方案。本文将以百度图...

人脸关键点:从识别技术到应用推广的发展

人脸关键点:从识别技术到应用推广的发展

  随着人工智能技术的不断发展,人脸关键点识别技术逐渐成为热门研究领域。人脸关键点识别技术是指通过计算机视觉和图像处理技术,在图像中准确地检测和定位人脸上的关键点,如眼睛、鼻...

人脑智能与人工智能的较量:未来谁将主宰?

人脑智能与人工智能的较量:未来谁将主宰?

  人类智慧的发展,源自人脑的高度进化。然而,随着科技的迅猛发展,人工智能也逐渐崭露头角。如今,人脑智能与人工智能正在展开一场精彩纷呈的较量,探讨着未来的主宰者。  人脑智能...

AI技术安全-防范风险与保障隐私的挑战与机遇

AI技术安全-防范风险与保障隐私的挑战与机遇

  现如今,人工智能(AI)技术正以惊人的速度不断发展,构建着各行各业的数字世界。与此同时,随着数字经济、智能化生产、信息化社会等趋势的不断加速,AI技术的应用也在日益扩大。...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。