[Malleys]

Почему бы исходные данные не хранить в объекте, который легко прочитать, и уже из него данные вставлять в <code> и в пример?

Malleys, сорри, не то, это как бы будет типа учебника по html и css, контейнер с кодом даёт пример кода, а див визуально показывает что обозначает этот код,

Как не то? Именно это оно и показывает! Я думал, вы поняли идею!

это... будет... учебник по html и css

Ну в таком виде он вряд ли будет, если вы будете каждые свойство, дескриптор, @-правило, селектор, функции таким образом описывать, то вы очень скоро потеряете контроль над вашим проектом, допустим даже потом, когда всё будет готово по вашему методу, даже добавить ещё какой-то пример выльется в массовое редактирование файлов.

Да, такое приложение возможно сделать только на HTML, CSS, JS, но только у вас всё должно происходить на одной странице. И вы должны начать хотя бы с описания данных к каждому свойству, например в формате JSON, что бы не было проблем с извлечением данных!

Я предлагаю вам такое Чистые данные → Интерфейс, вы почему-то опять выбираете самое сложное и многословное Интерфейс → данные → Интерфейс

Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a1"><span id="b1">text two</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.

Такой метод не очень для учебника, неторое свойства имеют много значении, и чтобы что-то сравнить, придётся прощёлкивать весь список.

text-align описывается это свойство и надо показать что будет если изменить значение с left на right и только, ну это разумеется пример,

Вы хотите сделать программу, в которой можно смотреть, какие бывают у CSS своиств значения, и как они воздействуют на элемент? 🆒🤓 😎💡 👍

обсуждение по ротации id среди элементов

юморист

первый как присвоить стиль диву и заполнить <span>, а потом при клике менять

В контексте того, что вы делаете учебник, то я думаю, что скорей нужен живой ввод с подсказками!

как преобразовать нормальный код в мнемонику "кавычки"

Используйте textContent для вставки текста пример на страницу. Можно ещё так "<p>Пример абзаца</p>".replace(/<>&"'/g, "&lt;&gt;&amp;"); если вы хотите вставить пример через innerHTML. Вопрос: Какой вариант вы выберерете?

решить вопрос с подсветкой кода

prism.js

и присвоить стиль ид'а "а" а спан заполнить свойством ид'а "а", как показано в 36 строчке, (36 строчки конечно небудет) и при клике на див поменять свойства дива и текст спана взятые у ид "b" и так по кругу, зачем кнопки если сам див может играть роль кнопки.

Если вы хорошо знаете, что для смены стиля нужно нажать на пример, так это потому что вы его сами сделали, и знаете, куда нажать. Те, кто будет это смотреть, не знают, что туда можно нажать. Кнопка нужна, она приглашает к действию!

скрипт должен найти в контейнере <code>

Может стоит начать с чистых данных, тогда не придётся ничего искать!

просто речь идет не про одну страницу, а про много страниц

Так делайте всё на одной странице.

пишите код каждой страницы от руки

то пишите, то не пишите, а если я не разбираюсь ещё так хорошо, то откуда мне знать, что потом делать с таким кодом. Про пост №74, так это все примеры придётся руками так набирать, или как?