想实现高德/百度示例中 源代码编辑器+效果预览

刚学习前端不久，想实现如下 源代码编辑器+效果预览 的效果，没有什么思路，希望有人能指导一下