Предшествуйте линиям Ремешка ботинка кода с $

Я хочу, чтобы мой код предшествовался с '$' как приглашение командной строки, но сделал тот '$' не частью highlightable текста.

index.html

  
    git clone https://github.com/vccabral/vagrant-django-template-1.git  
    cd vagrant-django-template-1  
    vagrant up  
    vagrant ssh  
    python -c "import this"  
  
1
nl ja de
Я добавил мерцающий курсор (I' m принял на себя обязательство сохранять признак мерцания релевантным: P)
добавлено автор Jason Sperske, источник

1 ответы

вот a CSS 2.1 (Я не знал, что это существовало тогда) способ сделать это (демонстрационный пример):

.com::before {
  content: "$";
  display: inline;
}

Копия и Мимо него и вы не должны видеть $ . Конечно, это использует некоторый CSS, который не может быть поддержан браузерами, для которых вы нацелены. Это называют содержание декларация или CSS Произведенное Содержание. Вот список из он - поддержка.

Также, если вы вносите небольшое изменение в свой HTML, можно добавить мерцающий курсор;)

  
    git clone https://github.com/vccabral/vagrant-django-template-1.git  
    cd vagrant-django-template-1  
    vagrant up  
    vagrant ssh  
    python -c "import this"  
.com::before {
    content: "$";
    display: inline;
}

.com.last::after {
    content: "_";
    display: inline;
    text-decoration:blink;
}
3
добавлено
спасибо. это точно, что я хотел. это работает отлично. boxes.vg/manifest/1
добавлено автор Victor 'Chris' Cabral, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)