Показываем исходный код на странице

Этим постом хочу начать новую рубрику «Полезное», в которой будут располагаться разные полезные, на мой взгляд, фрагменты кода, которые можно будет использовать в дальнейшем.

Как только начал делать посты, сразу возникла необходимость показать красивый исходный код на странице. Если бы у меня был свой WordPress на своём хостинге, то думаю проблем с этим не возникло. Взял бы плагин и прикрутил. Но я использую пока WordPress на бесплатном хостинге, где нет возможности ставить собственные плагины, поэтому как говорится за неимением королевы, придется довольствоваться горничной. Если вставлять исходники прям как есть из Eclipse, который я использую в качестве IDE, то форматирование отваливается. Происходит это из-за того, что несколько пробелов сворачиваются в один. Можно заключать исходный код в теги <pre>, но тогда шрифт не понятно какой, а я хочу такой же, как в тексте. Можно было бы править CSS, чтобы в PRE теге показывался нужный шрифт, но при быстрой смене темы придется снова править CSS. Всё это мне не подошло. Я немного подумал и написал простое приложение, которое преобразует пробелы табуляции исходного кода в специальные пробельные символы HTML.

К примеру, есть у нас строка public static void. После «перекодировки» получим public&nbsp;static&nbsp;void, где &nbsp; — HTML пробельный символ. Пробел заменился специальным символом. Аналогичным образом работает и приложение. Однако, все подряд пробелы я заменять не стал. Приложение заменяет табуляцую на несколько пробелов, а к символу перевода на новую строку добавляет <br>. Почему не заменяются обычные пробелы, а только табы? При выравнивании исходного текста в Eclipse, используются табы для реализации отступов разных уровней.

После использования понял, что не хватает перекодирования кавычек. Теперь кавычки переводятся в &uot;. Если использовать в исходном коде кавычки, которые есть, получались некрасивости.

Ниже представлен исходный код приложения.

package com.wordpress.coder;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.UIManager;

public class Main {

     private static final String TAB = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

     private static final Dimension SIZE = new Dimension(800, 600);

     public static void main(String[] args) {
          Font font = new Font("Verdana", Font.PLAIN, 11);

          UIManager.getDefaults().put("Button.font", font);
          UIManager.getDefaults().put("TextArea.font", font);

          javax.swing.SwingUtilities.invokeLater(new Runnable() {
               public void run() {
                    createGUI();
               }
          });
     }

     public static void createGUI() {
          JFrame.setDefaultLookAndFeelDecorated(true);

          JFrame frame = new JFrame("Wordpress coder");

          JPanel panel = new JPanel();
          panel.setLayout(new BorderLayout());

          final JTextArea textArea = new JTextArea();
          panel.add(new JScrollPane(textArea), BorderLayout.CENTER);

          JButton button = new JButton("Decode");
          panel.add(button, BorderLayout.SOUTH);

          button.addActionListener(new ActionListener() {
               public void actionPerformed(ActionEvent event) {
                    String source = textArea.getText();
                    source = source.replaceAll("\\&", "&amp;");
                    source = source.replaceAll("\t", TAB);
                    source = source.replaceAll("\n", "\n");
                    source = source.replaceAll("\"", "&quot;");
                    
                    textArea.setText(source);
               }
          });

          frame.getContentPane().add(panel);

          frame.setPreferredSize(SIZE);
          frame.pack();
          
          frame.setLocationRelativeTo(null);
          
          frame.setVisible(true);
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     }
}

Но к сожалению не всё так просто. Редактировать пост с исходным кодом придется только на вкладке «HTML». Если переключиться на вкладку «Визуально», а потом обратно, то пробельные символы &nbsp; ъсъедятся. Поэтому при редактировании поста нужно быть обязательно на вкладке «HTML».

Опишу коротко приложение. Внешний вид приложения показан на рисунке ниже.

wordpresscoder

Принцип работы следующий. Берем исходный код, копируем, затем вставляем в приложение и нажимаем «Decode». В результате получаем код, который можно вставить в редактор WordPress’а.

4 Responses to Показываем исходный код на странице

  1. chrisodessa:

    тьфу блин в общем так надо:

    {sourcesode language=»java»}
    далее код программы,
    поддерживает несколько языков
    {/sourcecode}

    разве что заменить надо { } на [ ]

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: