how to load code using codemirror

I have a PHP file that involved with codemirror which works great, but I want each text area to load the code from other file using PHP like index.php, main.css, main.js, and show preview from all of those files to combines.

My question is that how can write that code inside of each text area to link another page! I have tried to put <?php include('css/main.css'); ?> statement inside of one of text area for css and is not working.

Please see see full codes..

<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>

Many thanks.

Solution

What you are doing is trying to include the css file contents without link tag. Replace <link rel="stylesheet" type="text/css" href="css/main.css"> instead of <?php include('css/main.css'); ?>.