لذلك انتهيت من إنشاء هجين.

إنها صورة SVG يتم إنشاؤها ديناميكيًا، ويتم تخزينها كخاصية CSS مخصصة - ويتم استخدامها كصورة خلفية، حيث ترث الأنماط من العنصر الأصلي.

دعونا نتعمق.

جافا سكريبت

أولاً الطريقة الرئيسية:

lineNumbers(element, numLines = 50, inline = false)

العنصر هو عنصر المطلوب استخدامه، وnumLines هو عدد الأسطر المراد عرضها، ويشير السطر إلى ما إذا كان سيتم تخزين الصورة التي تم إنشاؤها على العنصر (صحيح)، أو على document.body (خطأ).

بعد ذلك، نحدد بادئة للخاصية المخصصة:

const prefix = '--linenum-';

قبل أن نواصل، نتحقق مما إذا كنا سنعيد استخدام أي عقار موجود:

if (!inline) {
  const styleString = document.body.getAttribute('style') || '';
  const regex = new RegExp(`${prefix}[^:]*`, 'g');
  const match = styleString.match(regex);

  if (match) {
    element.style.backgroundImage = `var(${match[0]})`;
    return;
  }
}

بعد ذلك، نقوم باستخراج الأنماط من العنصر، وتقديم SVG بنفس عائلة الخطوط، وحجم الخط، وارتفاع الخط وما إلى ذلك. :

const bgColor = getComputedStyle(element).borderColor;
const fillColor = getComputedStyle(element).color;
const fontFamily = getComputedStyle(element).fontFamily;
const fontSize = parseFloat(getComputedStyle(element).fontSize);
const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize;
const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2;
const translateY = (fontSize * lineHeight).toFixed(2);

const bgColor = getComputedStyle(element).borderColor;
const fillColor = getComputedStyle(element).color;
const fontFamily = getComputedStyle(element).fontFamily;
const fontSize = parseFloat(getComputedStyle(element).fontSize);
const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize;
const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2;
const translateY = (fontSize * lineHeight).toFixed(2);

const bgColor = getComputedStyle(element).borderColor;
const fillColor = getComputedStyle(element).color;
const fontFamily = getComputedStyle(element).fontFamily;
const fontSize = parseFloat(getComputedStyle(element).fontSize);
const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize;
const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2;
const translateY = (fontSize * lineHeight).toFixed(2);

دعونا نقسمها: