CREAR UNA CAJA DE CÓDIGO

Caja contenedor de código html, css, js y php

En el siguiente ejercicio tenemos una caja para contener código, dentro de ella os dejaré el código.

Cómo crear una caja para insertar código sin utiliza codepen

1. Creamos un contenedor en html que llamaremos con el id cajaCode
2. Dentro de el cuatro botones, cuatro cajas de código y dentro de cada caja un div llamado (#codeHTML, #codeCSS , #codeJS, #codephp) dentro de estos div otros dos: uno con clase numeral y otro con el código class code
3. Con CSS le damos forma a la caja principal y las diferentes cajas.
4. Por ultimo con JQuery ocultaremos todas las cajas dejando visible la de #codeHTML
5. Pondremos a la escucha los botones indicandoles que cuando se haga click en uno de ellos este se haga visible y el resto se oculten.
6. Crearemos un for para cargar los números del div con clase numeral.

Tan solo tienes que copiar el código siguiente y copiar el tuyo en las cajas con clase code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

                 
 <CajaCodigo>
  <div id="cajaCode">
    
    <input class="tipoCode" type="button" value="html">
    <input class="tipoCode" type="button" value="css">
    <input class="tipoCode" type="button" value="JS">
    <input class="tipoCode" type="button" value="php">
    
    
    <div id="codeHTML">
         <div class="numeral"></div>
 
       <div class="code"><code><pre>
              
************html**********************               
       </pre></code></div>
    </div>
    
    <div id="codeCSS">
         <div class="numeral"></div>

         <div class="code"><code> <pre>
**********************css***************************
          </pre></code></div>
    </div>
    
    <div id="codeJS">
         <div class="numeral"></div> 
         <div class="code"><code><pre>
codeee*****************************************************
         
          
          </pre></code></div>
    </div>
    
    <div id="codephp">
         <div class="numeral"></div> 

  <div class="code"><code><pre>
code***********************
  </pre></code></div>   
      
      
  </div>
 </div>

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>


          

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

div#cajaCode{

background: darkslategrey;
border: 15px groove dimgrey;
width:80%;
height:250px;
border-radius:10px;
box-shadow: 5px 5px silver, 
  10px 10px darkgrey, 
  15px 15px grey ;  
}
.numeral{

padding-left:2px;


color:lightslategrey;
font-weight:bolder;
align-content:center;

width:20px;
height: 1900px;
}
.tipoCode{

margin-top:10px;
margin-left:18px;
margin-bottom:0px;
width:15%;
background:silver;

font-size:1.2em;
font-weight: bolder;
color:purple;
}
.tipoCode:hover{
background:darkgrey;
}
.code{
margin-left: 5%;
}
#codeHTML, #codeCSS , #codeJS, #codephp {
width:90%;
height:150px;
margin: 10px auto;
padding:20px;

display: grid;
grid-template-columns: 25px 1fr;
background:black;
color:whitesmoke;

overflow-x: auto;
overflow-y: auto;
white-space: nowrap;


}

@media(max-width: 600px) {

 div#caja{
 width:90%;
 }
 #codeHTML, #codeCSS , #codeJS, #codephp {
 width:80%;
 }
 .code{
 margin-left: 10%;
 }
 input[value='html']{
 width:20%;
 }
}


             

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

CajaCode();

/*Con esta funcion creamos cajas de código, nuestra caja tiene 
tres botones uno para mostrar el jS/JQ , html y php pomndremos todas las páginas ocultas
cuando pulsemos cada boton saltará una página. hemos creado una funcion llamada numeral
para cargar un div con numeros a la izquierda*/
function CajaCode(){
  /************ocultamos todos los div menos el de html***************/
      $("#codeCSS  , #codeJS, #codephp").hide();
       
      /**ponemos a la escula los botones y le indicamos que se haga visible el nuestro
      ocultando el resto**/
      $("input[value='css']").click(function(){ 
            $("#codeCSS").show();
            $(" #codeHTML , #codeJS, #codephp").hide(); 
      });
      $("#cajaCode input[value='css']").click(function(){ 
            $("#codeCSS").show();
            $(" #codeHTML , #codeJS, #codephp").hide(); 
      });
      $("#cajaCode input[value='html']").click(function(){ 
            $("#codeHTML").show();
            $(" #codeCSS , #codeJS , #codephp").hide(); 
      });
      $("#cajaCode input[value='JS']").click(function(){ 
            $("#codeJS").show();
            $(" #codeCSS , #codeHTML , #codephp").hide(); 
      });
      $("#cajaCode input[value='php']").click(function(){ 
            $("#codephp").show();
            $(" #codeCSS , #codeHTML , #codeJS").hide(); 
      });

/**********creamos un for para llenar el div numeral con numeros de 1 a 100*************/
      $(".numeral").html(C);
      function C(){
         
        let texto="";
        
        for(let i = 1; i<100; i++){
          
          texto += i+"<br>";
          
        }
      return texto;
 
}

}
            
             
             

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

***************si tienes php cargalo aquí***********************