Как я ввожу браузер кода на моей странице?

Я хочу поместить этот тип браузера кода на моей веб-странице: Как я могу добиваться этого?.

visor de código

5
задан 14.03.2017, 23:51
3 ответа

Чтобы объединяться cГіdigo javascript, html, php, css, и т.д.... есть много librerГ-эксперт js, я ты recomendarГ - http://prismjs.com/

Жду , что я был тем, что ты ищешь.

2
ответ дан 24.11.2019, 14:19
  • 1
    Большое спасибо =), уже logr и # 233; большое спасибо =) – jonathan 24.05.2016, 00:41

Я не знаю, как они производят код на этой конкретной странице, но этот "браузер" - только код html и css как этот:

pre {
    background: #262720;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-family: Consolas,sans-serif;
    padding: 8px;
    font-size: .95em;
    color: #fff;
    overflow: auto;
    width: 100%;
}
pre .kw1, pre .me1 {
    color: #00d6ff;
}
pre .sy0 {
    color: #f92772;
}
pre .br0 {
    color: #aaa;
}
pre .st0 {
    color: #fff8ab;
}
<pre>  <span class="kw1">var</span> app <span class="sy0">=</span> angular.<span class="me1">module</span><span class="br0">(</span><span class="st0">'formApp'</span><span class="sy0">,</span> <span class="br0">[</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span>
&nbsp;
  app.<span class="me1">controller</span><span class="br0">(</span><span class="st0">'MainCtrl'</span><span class="sy0">,</span> <span class="kw1">function</span> <span class="br0">(</span>$scope<span class="br0">)</span> <span class="br0">{</span>
    $scope.<span class="me1">formData</span> <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
  <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
&nbsp;</pre>
4
ответ дан 24.11.2019, 14:19
  • 1
    Спасибо большое спасибо все помогли мне – jonathan 24.05.2016, 00:41

Ты можешь использовать highlight.js, plugin, разработанный, чтобы распознавать исходный код и его форматировать приспособленный.

$(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
.snippet .hljs {
  background-color: #262720;
  color: #fff;
}
.snippet .hljs .hljs-keyword {
  color: #00d6ff;
}
.snippet .hljs .hljs-string {
  color: #fff8ab
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<pre class="snippet">
<code class="javascript">
  var app = angular.module('formApp', []);
  
  app.controller('MainCtrl', function ($scope) {
    $scope.formData = {};
  });
</code>
</pre>

Это не точно то, что ты помещаешь в твой пример, так как highlight.js то, что он распознает, состоит javascript в том, что это как таковой язык, но может быть настроенным легко в твой вкус.

Проверяет гид стилей и гид языка.

2
ответ дан 24.11.2019, 14:19