Question2Answer: Różnice pomiędzy wersjami
Z ToProste
m |
m |
||
Linia 38: | Linia 38: | ||
+ | Dodaliśmy już obsługę kodu do CKEditor. Trzeba jeszcze zrobić coś, aby wyświetlany kod miał pokolorowaną składnię. Do tego wykorzystamy pliku z drugiej paczki '''syntaxhighlighter_3.0.83.zip''' | ||
+ | |||
+ | * W katalogu używanej skórki tworzymy katalogi '''css''' i '''javascript'''. | ||
+ | ** zawartość katalogu '''styles''' z paczki kopiujemy do katalogu '''css''', | ||
+ | ** zawartość katalogu '''scripts''' z paczki kopiujemy do katalogu '''javascript'''. | ||
+ | * Logujemy się do panelu administratora skryptu, wchodzimy w '''Wygląd''' i w pole '''Własny kod HTML w sekcji <head> każdej strony:''' wklejmy poniższy kod. Wcześniej zamieniając '''%THEME%''' na nazwę katalogu z używaną skórką. | ||
+ | |||
+ | <syntaxhighlight lang="html4strict"> | ||
+ | <link rel="stylesheet" href="/qa-theme/%THEME%/css/shCore.css" type="text/css"> | ||
+ | <link rel="stylesheet" href="/qa-theme/%THEME%/css/shThemeDefault.css" type="text/css"> | ||
+ | |||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shCore.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shAutoloader.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shLegacy.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAppleScript.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAS3.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushBash.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushColdFusion.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCpp.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCSharp.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCss.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDelphi.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDiff.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushErlang.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushGroovy.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJavaFX.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJava.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJScript.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPerl.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPhp.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPlain.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPowerShell.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPython.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushRuby.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSass.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushScala.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSql.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushVb.js"></script> | ||
+ | <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushXml.js"></script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | SyntaxHighlighter.all() | ||
+ | </script> | ||
+ | </syntaxhighlight> | ||
− | |||
== Zobacz też == | == Zobacz też == |
Wersja z 16:54, 21 maj 2014
Question2Answer to skrypt serwisu pytania i odpowiedzi. Jest on rozpowszechniany ma licencji GPL.
Integracja Question2Answer z SyntaxHiglighter
Jakiś czas temu była dostępna wtyczka kolorująca składnię kodów różnych języków skryptowych i programowania. Ale nie jest ona już rozwijana i nie da się jej zintegrować z nowymi wersjami skryptu.
Rozwiązaniem jest dodanie SyntaxHighlighter do CKEditor, którego używa skrypt.
- Pobierz paczki dodatków i wypakuj je.
- Zawartość archiwum ckeditor-syntaxhighlight.zip z katalogu /plugins/syntaxhighlight/ przekopiuj do katalogu /qa-plugin/wysiwyg-editor/plugins/.
- Otwórz plik /qa-plugin/wysiwyg-editor/config.js, do edycji polecam Notepad++, i dodaj poniższy kod:
config.extraPlugins = 'syntaxhighlight'; config.toolbar_Full.push(['Code']);
- Zawartość pliku po modyfikacji powinna wyglądać mniej więcej tak:
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.extraPlugins = 'syntaxhighlight'; config.toolbar_Full.push(['Code']); };
- Otwórz plik /qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php.
- W funkcji get_field odszukaj wiersz zawierający "['RemoveFormat', 'Maximize']".
- Zamień go na "['RemoveFormat', 'Maximize', 'Code']" - dodanie przycisku "Code" do paska funkcji w CKEditor.
- Otwórz plik /qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php.
Dodaliśmy już obsługę kodu do CKEditor. Trzeba jeszcze zrobić coś, aby wyświetlany kod miał pokolorowaną składnię. Do tego wykorzystamy pliku z drugiej paczki syntaxhighlighter_3.0.83.zip
- W katalogu używanej skórki tworzymy katalogi css i javascript.
- zawartość katalogu styles z paczki kopiujemy do katalogu css,
- zawartość katalogu scripts z paczki kopiujemy do katalogu javascript.
- Logujemy się do panelu administratora skryptu, wchodzimy w Wygląd i w pole Własny kod HTML w sekcji <head> każdej strony: wklejmy poniższy kod. Wcześniej zamieniając %THEME% na nazwę katalogu z używaną skórką.
<link rel="stylesheet" href="/qa-theme/%THEME%/css/shCore.css" type="text/css"> <link rel="stylesheet" href="/qa-theme/%THEME%/css/shThemeDefault.css" type="text/css"> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shCore.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shAutoloader.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shLegacy.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAppleScript.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAS3.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushBash.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushColdFusion.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCpp.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCSharp.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCss.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDelphi.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDiff.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushErlang.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushGroovy.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJavaFX.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJava.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJScript.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPerl.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPhp.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPlain.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPowerShell.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPython.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushRuby.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSass.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushScala.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSql.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushVb.js"></script> <script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushXml.js"></script> <script type="text/javascript"> SyntaxHighlighter.all() </script>
Zobacz też
<htmlet>zobacz-tez</htmlet>
Linki zewnętrznie
- Strona projektu Question2Answer
- Strona projektu SyntaxHiglighter