如何使用代码镜像加载代码

我有一个PHP文件，涉及的codemirror的工作很好，但我希望每个文本区域加载代码从其他文件使用PHP像index.php, main.css, main.js，并显示预览从所有这些文件到组合。

我的问题是，如何在每个文本区域内编写代码来链接另一个页面!我试图将<?php include('css/main.css'); ?>语句放在css的一个文本区域内，并且不工作。

请参阅完整代码…

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css"> <link rel="stylesheet" href="css/style.css">
<div id="wrap">
  <!-- Code Editors -->   <section id="code_editors">
    <div id="html" class="code_box">
      <h3>HTML</h3>
      <textarea name="html"></textarea>
    </div>
      <div id="css" class="code_box">
      <h3>CSS</h3>
      <textarea name="css"></textarea>
      </div>
      <div id="js" class="code_box">
      <h3>JavaScript</h3>
      <textarea name="js"></textarea>
      </div>  
      </section>
     <!-- Sandboxing -->   <section id="output">
     <iframe></iframe>   </section>    </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.js"></script>    
<!-- For HTML/XML --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/xml/xml.js">/script><script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/htmlmixed/htmlmixed.js"></script>    
<!-- For CSS --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/mode/css/css.js"></script>    
<!-- For JS --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/javascript/javascript.js"></script> <script src="js/js.js"></script>