Poszukuję sposobu automatycznego formatowania i kolorowania kodu, który zapisuję w dokumencie HTML. Wiem, że wikipedia to robi, na przykład: na stronie: http://en.wikipedia.org/wiki/Nested_functionJak sformatować kod w html/css/js/php
Jestem pewien, że istnieją biblioteki, które mogą to zrobić, ale nie mogę dla mojego życia, znaleźć. Czy ktoś ma jakieś sugestie?
Zobacz bibliotekę Prettify JavaScript. Jest to jeden powszechnie stosowane przez ludzi (jest to jeden używany jest tutaj na SO, na przykład).
będzie go używać tak:
W swojej <head> element:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
W swojej <body> element:
<body onload="prettyPrint()">
<!-- any HTML you like here... -->
<pre class="prettyprint">
def say_hi():
print("Hello World!")
</pre>
<!-- any HTML you like here... -->
</body>
T hat's do prostego korzystania z biblioteki. Jeśli używasz innych skryptów JavaScript na swojej stronie, polecam inne metody włączania biblioteki Prettify (np. Nie używaj atrybutu onload elementu <body>.) Na przykład, jeśli używasz jQuery, napisałem jQuery wtyczka, że zazwyczaj użyć składni podkreślić pewne elementy:
// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function() { this.html(prettyPrintOne(this.html())); };
Używane tak:
$('#my-code-element').prettify();
to stara sprawa, ale jak to wymyślił pierwszy w Google dla mnie, myślałem” d dodaj inną opcję. Podczas gdy Prettify jest nadal użyteczną opcją, pokazuje nieco swój wiek. Nowsza biblioteka, którą spotkałem, to Prism i wygląda na to, że działa całkiem dobrze. Jest bardziej semantyczny i zapewnia dokładniejszą kontrolę nad formatowaniem kodu. Obsługuje także wtyczki, a ich motywy wyglądają ładniej po wyjęciu z pudełka niż Prettify.
Byłbym naprawdę zaniepokojony przez dodanie do mojego kodu czegoś, co nazywa się pryzmatem ...: p –
OMYGOSH TAK DOBRE! DZIĘKUJĘ ZA TO!!! – Adam
Myślę, że prostszym i mocniejszym rozwiązaniem są highlight.js. Obsługuje obecnie 169 języków i 77 stylów kodu (np. Solarized dark and light). Niektórzy więcej:
Szybkie setup:
1 - W głowie HTML:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
2 - W treści HTML
<pre>
<code class="html">
<p>This is your HMTL sample</p>
<p>You can use classes like "html", "php", "css", "javascript" too..</p>
</code>
</pre>
Można sprawdzić języki i style here.
Spot na! Działa świetnie! Dzięki. –