Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Quellcodeformattierung per CSS ?

Empfohlene Antworten

Veröffentlicht

hi,

ich weis, verrückte frage ^^

aber gibt es eine Möglichkeit, einen Quellcodeauszug, den ich in HTML einfüge,

also Beispielsweise

public function hello()

{

print "hello world";

}

nur mit CSS zu formattieren ?

es gibt da ja diesen schönen HTML-Tag "code". Ich würde den gerne benutzen, ohne eine Flut von span und div-Tags zur Formattierung einzubetten.

danke

Mit CSS wirst du zwar vielleicht festlegen können, wie dein Codeschnipsel vermöge zB Schriftart, -größe oder -farbe dargestellt wird. Aber wenn es dir um passende Einrückungen oder Syntax-Highlighting geht, dürfte CSS allein wohl nicht weiterhelfen.

hi,

ich weis, verrückte frage ^^

aber gibt es eine Möglichkeit, einen Quellcodeauszug, den ich in HTML einfüge,

also Beispielsweise

public function hello()

{

print "hello world";

}

nur mit CSS zu formattieren ?

es gibt da ja diesen schönen HTML-Tag "code". Ich würde den gerne benutzen, ohne eine Flut von span und div-Tags zur Formattierung einzubetten.

danke

Hi!

Total crazy Deine Frage, um nicht zu sagen: abgefahren! :P

Aber, ja das geht:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>select-test</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

		<style type="text/css" media="screen">

    code {

      color: red;

    }

    </style>

  </head>

  <body>

    <code>

      public function hello() {<br />

        print "hello world";<br />

      }

    </code>

  </body>

</html>

Grüße, Tobias

najo,

  und <br /> war eigentlich das, was ich vermeiden wollte.

<pre>

</pre>

geht, aber dann hab ich keine farbliche hervorhebung und muss html-entities immernoch codieren (< > bsp)

hätte ja sein können das es da irgend einen weg gibt, dem Browser zu sagen, wie er Code darstellen soll - also auch syntaxhighlighting...k.A. vielleicht über regular expressions....nur eine idee (im Sinne von CSS ^^)

Ich versteh zwar nur die Hälfte von dem was Du da zusammenbrabbelst, aber Du kannst CSS-basiertes Syntax-Highlighting mit der PEAR-Klasse Text_Highlighter erreichen. Bspw. so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Highlighting mit PEAR</title>
<style type="text/css">
.hl-default {
color: black;
}
.hl-code {
color: gray;
}
.hl-brackets {
color: olive;
}
.hl-comment {
color: orange;
}
.hl-quotes {
color: darkred;
}
.hl-string {
color: red;
}
.hl-identifier {
color: blue;
}
.hl-builtin {
color: teal;
}
.hl-reserved {
color: green;
}
.hl-inlinedoc {
color: blue;
}
.hl-var {
color: darkblue;
}
.hl-url {
color: blue;
}
.hl-special {
color: navy;
}
.hl-number {
color: maroon;
}
.hl-inlinetags {
color: blue;
}
.hl-main {
background: white;
}
.hl-gutter {
background: #999;
color: white
}
.hl-table {
font: 12px courier;
border: solid 1px gray;
}
</style>
</head>
<body>
<?php
require_once 'Text/Highlighter.php';
require_once 'Text/Highlighter/Renderer/Html.php';
$options = array( 'numbers' => HL_NUMBERS_TABLE, 'tabsize' => 2);
$renderer =& new Text_Highlighter_Renderer_HTML($options);
$highlighter =& Text_Highlighter::factory('php');
$highlighter->setRenderer($renderer);
$hlString = "<?php\n";
$hlString .= "echo 'Hallo Welt!';\n";
$hlString .= "?>\n";
echo $highlighter->highlight($hlString);
?>
</body>
</html>
[/PHP]

Ergebnis: Siehe Attachment

Grüße, Tobias

post-8531-14430447293028_thumb.jpg

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.