• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS-Highlighting Probleme

Status
Für weitere Antworten geschlossen.
N

NetzSchleicher

Mitglied
Moin!

Da ich ja jetzt über eine Möglichkeit verfüge, HTML und PHP highlighten zu lassen, brauche ich das gleiche noch für CSS, damit die Grundsammlung beisammen ist. Ich orientiere mich da nach dem Highlight-Schema von Phase5, da mir dies sehr gut gefällt.

Zuerst schreibe ich alle validen Befehle in CSS, die auch jeder benutzt, in ein Array und lasse später die Replaces (preg_replace) in einer for-Schleife durchlaufen, da alles nacheinander zu aufwändig sein würde. Allerdings bekomme ich keinen Code zurückgegeben...

Funktion für das CSS-Highlighting:

PHP: 
<?php

/* Highlight Functions for Code */
function highlight_css($str)
	{
         //Bold Words in Array
         $bolds = array(
         		# HTML Elements
         		"body",
                         "html",
                         "head",

                         # Div Element
                         "div",

                         # Table Elements
                         "table",
                         "tr",
                         "td",

                         # Frame Elements
                         "iframe",
                         "frame",

                         # Link Elements
                         "a",

                         # Text Elements
                         "span",
                         "label",

                         # Header Elements
                         "h1",
                         "h2",
                         "h3",
                         "h4",
                         "h5",

                         # Form Elements
                         "input",
                         "select",
                         "option",
                         "optgroup",
                         "textarea",

                         # Margin and Padding
                         "margin",
                         "margin-left",
                         "margin-bottom",
                         "margin-right",
                         "margin-top",

                         "padding",
                         "padding-left",
                         "padding-bottom",
                         "padding-right",
                         "padding-top",

                         # Position Values
                         "position",
                         "top",
                         "left",
                         "bottom",
                         "right",

                         # Color and Image Values
                         "img",

                         "background-image",
                         "background-repeat",
                         "background-attachment",
                         "background-color",
                         "background-position",

                         "color",

                         # Align Values
                         "middle",
                         "center",
                         "justify",
                         "align",
                         "text-align",
                         "vertical-align",

                         # Text Methods
                         "text-align",
                         "text-indent",
                         "text-transform",
                           # --> Text-Transform
                           "uppercase",
                           "lowercase",
                           "capitalize",
                  	"text-top",
                         "text-bottom",

                         # Spacing Values
                         "letter-spacing",
                         "word-spacing",

                         # Overflow
                         "overflow",

                         # Font Values
                         "font-size",
                           # --> Line-height
                           "line-height",
                         "font-weight",
                         "font-style",
                         "font-family",
                         "font",

                         # Display
                         "display",
                         "visibility",
                           # --> Types
                           "visible",
                           "hidden",

                         # Borders
                         "border",
                         "border-color",
                         "border-width",
                         "border-style",
                           # --> Types
                           "solid",
                           "dashed",
                           "dotted",
                           "none",
                           "groove",
                           "inset",
                           "double",
                           "ridge",
                           "outset",

                         "border-bottom",
                         "border-bottom-color",
                         "border-bottom-style",
                         "border-bottom-width",

                         "border-top",
                         "border-top-color",
                         "border-top-style",
                         "border-top-width",

                         "border-left",
                         "border-left-color",
                         "border-left-style",
                         "border-left-width",

                         "border-right",
                         "border-right-color",
                         "border-right-style",
                         "border-right-width",

                         "border-spacing",
                         "border-collapse",
                           # --> Types
                           "collapse",
                           "seperate",

                         # Float and Clear
                         "float",
                         "clear",
                           # Extra Type
                           "both",
                           "all",

                         # Height and Width
                         "height",
                         "width",

                         # Lists
                         "list-style",
                         "list-style-type",
                           # Types
                           "none",
                           "circle",
                           "square",
                           "disc",
                           "decimal",
                           "lower-roman",
                           "upper-roman",
                           "decimal-leading-zero",
                           "lower-latin",
                           "upper-latin",
                           "lower-greek",
                           "armenian",
                           "georgian",
                         "list-style-image",
                         "list-style-position",
                           # Types
                           "inside",
                           "outside",

                         # Z-Index
                         "z-index",

                         # url()
                         "url",

                         # Classes
                         ":hover",
                         ":active",
                         ":visited",
                         ":link",
                         ":lang",
                         ":focus",
                         ":first-line",
                         ":first-letter",
                         ":first-child",
                         ":before",
                         ":after",
                         );
         for ( $i = 0; $i < count($bolds); $i++ )
          {
          $code = preg_replace("!(".$bolds[$i].")!","<strong class='bold'>".$bolds[$i]."</strong>",$code);
          }

         return $code;
         }

?>

Befehl im BBCode:

PHP: 
<?php

function bbcode($str)
        ...
        $str = preg_replace("!\[css\](.*)\[/css\]!isUe","highlight_css('\\1', TRUE);",$str);
        ...
}

?>

Leider bekomme ich da nichts ausgegeben...
 
Afaik musst du dabei [phpnet]preg_replace_callback[/phpnet] verwenden.

Wobei ich mich Frage, ob ein CSS-highlighter wirklich Sinn macht...
 
So wie ich das bei php.net verstanden habe, müsste es so Aussehen:

PHP: 
<?php

function bbcode($str)
        ...
        $str = preg_replace_callback("!\[css\](.*)\[/css\]!isUe","highlight_css",$str);
        ...
}

?>



Ahja, es wäre auch ganz praktisch in dem größeren Bereich die Variablen zu benutzen, die auch tatsächlich existieren. Also nicht den Text in $str schreiben und dann $code verwenden ;) Eigentlich hättest du eine Fehlermeldung bekommen müssen, wenn du error_reporting(E_ALL); am anfang des Scriptest hast.

PHP: 
<?php

//Da darf kein $str stehen
function highlight_css($code)
    { 
//Der lange Array
         for ( $i = 0; $i < count($bolds); $i++ )
          {
          $code = preg_replace("!(".$bolds[$i].")!","<strong class='bold'>".$bolds[$i]."</strong>",$code);
          }

         return $code;
         }

?>

Wenn ich den Code aber richtig verstehe, dann werden alle Elemente in dem array gleich eingefärbt und den Sinn dahinter verstehe ich nicht so ganz...

Keine Garantie fürs funktionieren ;)
 
Ich musste gar nicht mit dieser Funktion arbeiten, es lag nur an dem $str.

Was allerdings jetzt noch ein Problem ist, sind die ganzen Werte wie px oder pt mit Zahlen davor auch noch zu highlighten. Mir ist schonmal ein grober Teil gelungen, allerdings wird nach der ersten gehighlighteten Einheit gar nichts mehr farbig verändert.

Hier der neue Code:
PHP: 
<?php

/* Highlight Functions for Code */
function highlight_css($code)
	{
         //Red Invalid Commands
         $code = preg_replace("!moz-!isU","<big>moz</big>",$code);
         $code = preg_replace("!scrollbar(.*);!isU","<big>scrollbar$1</big>;",$code);

         //Bold Words in Array
         $bolds = array(
         		# HTML Elements
         		"body",
                         "html",
                         "head",

                         # Div Element
                         "div",

                         # Table Elements
                         "table",
                         "tr",
                         "td",

                         # Frame Elements
                         "iframe",
                         "frame",

                         # Link Elements
                         "a",

                         # Text Elements
                         "span",
                         "label",

                         # Header Elements
                         "h1",
                         "h2",
                         "h3",
                         "h4",
                         "h5",

                         # Form Elements
                         "input",
                         "select",
                         "option",
                         "optgroup",
                         "textarea",

                         # Margin and Padding
                         "margin",
                         "margin-left",
                         "margin-bottom",
                         "margin-right",
                         "margin-top",

                         "padding",
                         "padding-left",
                         "padding-bottom",
                         "padding-right",
                         "padding-top",

                         # Position Values
                         "position",
                         "top",
                         "left",
                         "bottom",
                         "right",

                         # Color and Image Values
                         "img",

                         "background-image",
                         "background-repeat",
                         "background-attachment",
                         "background-color",
                         "background-position",

                         "color",

                         # Align Values
                         "middle",
                         "center",
                         "justify",
                         "align",
                         "text-align",
                         "vertical-align",

                         # Text Methods
                         "text-align",
                         "text-indent",
                         "text-transform",
                           # --> Text-Transform
                           "uppercase",
                           "lowercase",
                           "capitalize",
                  	"text-top",
                         "text-bottom",

                         # Spacing Values
                         "letter-spacing",
                         "word-spacing",

                         # Overflow
                         "overflow",

                         # Font Values
                         "font-size",
                           # --> Line-height
                           "line-height",
                         "font-weight",
                         "font-style",
                         "font-family",
                         "font",

                         # Display
                         "display",
                         "visibility",
                           # --> Types
                           "visible",
                           "hidden",

                         # Borders
                         "border",
                         "border-color",
                         "border-width",
                         "border-style",
                           # --> Types
                           "solid",
                           "dashed",
                           "dotted",
                           "none",
                           "groove",
                           "inset",
                           "double",
                           "ridge",
                           "outset",

                         "border-bottom",
                         "border-bottom-color",
                         "border-bottom-style",
                         "border-bottom-width",

                         "border-top",
                         "border-top-color",
                         "border-top-style",
                         "border-top-width",

                         "border-left",
                         "border-left-color",
                         "border-left-style",
                         "border-left-width",

                         "border-right",
                         "border-right-color",
                         "border-right-style",
                         "border-right-width",

                         "border-spacing",
                         "border-collapse",
                           # --> Types
                           "collapse",
                           "seperate",

                         # Float and Clear
                         "float",
                         "clear",
                           # Extra Type
                           "both",
                           "all",

                         # Height and Width
                         "height",
                         "width",

                         # Lists
                         "list-style",
                         "list-style-type",
                           # Types
                           "none",
                           "circle",
                           "square",
                           "disc",
                           "decimal",
                           "lower-roman",
                           "upper-roman",
                           "decimal-leading-zero",
                           "lower-latin",
                           "upper-latin",
                           "lower-greek",
                           "armenian",
                           "georgian",
                         "list-style-image",
                         "list-style-position",
                           # Types
                           "inside",
                           "outside",

                         # Z-Index
                         "z-index",

                         # url()
                         "url",

                         # Classes
                         ":hover",
                         ":active",
                         ":visited",
                         ":link",
                         ":lang",
                         ":focus",
                         ":first-line",
                         ":first-letter",
                         ":first-child",
                         ":before",
                         ":after",
                         );

         //Replaces in For
         for ( $i = 0; $i < count($bolds); $i++ )
          {
          $code = str_replace($bolds[$i],"<b>".$bolds[$i]."</b>",$code);
          }

         //Color- and Value-Highlight
	$values = array(
         		"em",
                         "px",
                         "ex",
                         "in",
                         "cm",
                         "mm",
                         "pt",
                         "%"
                         );

	$colors = array(
         		"aqua",
                         "black",
                         "blue",
                         "fuchsia",
                         "grey",
                         "green",
                         "lime",
                         "maroon",
                         "navi",
                         "olive",
                         "orange",
                         "purple",
                         "red",
                         "silver",
                         "teal",
                         "white",
                         "yellow"
                         );

         //Value Replaces
         for ( $o = 0; $o < count($values); $o++)
          {
          $code = preg_replace("!^(.*)\:(.*)".$values[$o]."\;$!isU","$1:<em>$2".$values[$o]."</em>;",$code);
          }

         //Color Replaces
         for ( $p = 0; $p < count($values); $p++)
          {
          $code = str_replace($colors[$p],"<em>".$colors[$p]."</em>",$code);
          }

         //Sharp Colors
         $code = preg_replace("!\#(.*)\;!isU","<em>#$1</em>;",$code);

         //Putting into <code></code>
         $code = "<pre>CSS-Code:</pre>\n<code class='css'>".$code."</code>\n";

         return $code;
         }

?>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben