Я работаю над программой командной строки Markdown, и я хотел бы отформатировать блоки исходного кода в выводе html немного лучше, чем простой <pre><code>.....
Мои критерии:
- Я хочу, чтобы номера строк отображались перед каждой строкой
- Я хочу, чтобы сам код можно было выбирать, чтобы я мог копировать только код (а не номера строк) в буфер обмена
Я пытался использовать DIV, поскольку таблицы, кажется, плохо форматируются, но я открыт для всего.
Что я пробовал:
- Таблица с одной строкой, ячейка 1 представляла собой блок номера строки с предварительно отформатированным кодом, а ячейка 2 - исходный код. Проблема: первый столбец с номерами строк неизменно занимал много места (автонастройка ширины кажется запутанной)
- Таблица с несколькими строками, такая же проблема, как у таблицы с 1 строкой
- DIV, я просто не могу заставить DIV планировать так, как я хочу их
Может кто-нибудь дать мне указатель на то, как получить то, что я хочу?
Вот пример (с очевидным ограничением, которое я использую Markdown, чтобы показать пример здесь):
01 | Source code line 1
02 | Source code line 2
03 | Last line of source code
Теперь, если я нажму и выберу первую строку и перетащу вниз на несколько строк, я не хочу, чтобы выборка включала столбец с номером строки, иначе это было бы легко.
Итак, есть указатели?
Одна дополнительная функция, которая мне не нужна, заключается в том, что если я сделаю окно слишком узким, чтобы содержать исходный код, мне не нужно его разбивать на две строки. Единственный способ понять, как эта функция будет работать, - это отформатировать каждую строку по отдельности, а не по каждому столбцу в отдельности, чтобы номера строк также корректировались в своем положении при разрыве строки. Поскольку я хочу иметь возможность копировать только исходный код, я полагаю, что вместо этого мне нужно отформатировать каждый столбец.
Вот что я пробовал:
<html><body>
<style>
.lines
{
background-color: #c0c0ff;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
border-right: 1px solid #a0a0a0;
margin-left: 20px;
padding-left: 2px;
padding-right: 2px;
}
.code
{
background-color: #c0c0ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
padding-left: 2px;
}
</style>
<pre class='lines'><code>01
02
03
SELECT *
FROM TABLE
WHERE A = B
Это проблема с цветом фона, я бы хотел, чтобы цвет фона продолжался до правой части окна браузера, но вместо этого он останавливался прямо справа от кода, т.е. как то так:
+----+-------------+
| 01 | SELECT * |
| 02 | FROM TABLE |
| 03 | WHERE A = B |
+----+-------------+
когда я хотел бы что-то вроде этого:
+----+--------------------------------------------------------------------------+
| 01 | SELECT * |
| 02 | FROM TABLE |
| 03 | WHERE A = B |
+----+--------------------------------------------------------------------------+